Seções iMasters
Desenvolvimento + HTML + Web Standards

Semântica HTML5: comece agora a usá-la!

Vou lhes dar um ótimo motivo para já começar a usar HTML5 nos teus projetos: semântica. Os elementos <header>, <footer>, <article>, <aside>, <section> e <nav> são níveis de blocos tão bons quanto o elemento <div>. Para o usuário comum e para os desenvolvedores não haverá nenhuma mudança perceptível (do ponto de vista visual).

E nem deveria! Desde o início, a linguagem nasceu com o intuito de marcar o conteúdo. Isso por si só, já justifica marcarmos mais adequadamente nossos conteúdos, usando as novas tags do HTML5.

Essa nova versão da linguagem HTML não trouxe apenas novas tags; vieram também algumas APIs. Mas este nem é o meu foco neste artigo. Quero falar somente da marcação.

Todas as novidades são ótimas e muito úteis. Mas se você ainda não usa HTML5 nos seus projetos, comece agora mesmo! E comece pela semântica.

A adoção de uma nova tecnologia demanda esforço, estudo, testes… Enfim: tempo. Comece aos poucos. Adote as tags semânticas e isso já será um grande avanço.

O Doctype já é bem mais simples e possível de decorar, do que do xhtml que estamos acostumados.

DOCTYPE html5

<!DOCTYPE html>

Isto no lugar do nosso velho amigo:

<!!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Semântica html5

Existem as tags header e footer. Intuitivas, não? Chega de:

<div id="header">

e

<div id="footer">

Agora podemos informar para os diversos meios de acesso que consomem as informações das nossas páginas, com essas duas tags:

<header id="header">

e

<footer id="footer">

Podemos ter várias tags <header num mesmo documento.

O elemento header

Por exemplo, <header id=”header”>, pode marcar o cabeçalho do nosso template. Aquela parte que se mantém fixa mesmo com a mudança de páginas. Geralmente, é aquela área que contém o logotipo e a navegação principal do site. E alguns outros elementos <header que marquem o cabeçalho do nosso conteúdo.

Pense numa listagem de artigos de um site. Cada artigo possui uma data, um título, autor, categoria em que foi publicado… Isso tudo é informação de cabeçalho, então podemos, sim, ter várias tags header nesse documento.

Mas não uma tag header dentro da outra.

O elemento footer

Nessa mesma ideia, o elemento <footer id=”footer”> geralmente contém aquele copyright © de direitos autorais e quando visualizamos um artigo específico de um site, aquela área no final do artigo, que contém os artigos relacionados e os botões das redes sociais são o footer deste conteúdo.

O elemento article

Eu falei um pouco sobre “conteúdo principal”. Entenda isso como aquele conteúdo que pode ser apresentado “sozinho”. A informação que faz sentido por si só (sem o template, por exemplo). Isto significa que podemos ter vários elementos article num mesmo documento. Porém, vamos simplificar por enquanto: pensemos numa simples estrutura:

Mesmo sem os atributos IDs, conseguimos facilmente perceber que header#content-header pertence ao article #content, pois é filho deste elemento. Com essa melhora na semântica, ajudaremos os meios de acesso (tais como os robôs de busca) a fazerem uma web melhor. Com mais significado.

O elemento section

Esta tag identifica áreas de conteúdo – para ser mais exato, seções de conteúdo. Também podemos ter vários desses elementos no nosso documento. Depende da necessidade do conteúdo que estamos apresentando. Imagine a home de um site, com aquelas chamadas para páginas internas. Essa área é uma <section> dessa home. Um pedaço do conteúdo.

Semântica dos elementos

Entenda que section e article não são as novas DIVs. Ainda podemos/devemos usar div nas nossas páginas. As tags div e span, marcam conteúdos que não possuem nenhuma semântica. Tais como aquele container que serve somente para “centralizar” o site. Este é um bom uso da tag div, mesmo nos tempos de HTML5.

O elemento nav e o elemento aside

Marcamos com nav, a navegação do site. Os links pelos quais os visitantes vão alcançar nossos conteúdos. Até mesmo um formulário pode fazer parte da nossa navegação.

Marcamos com aside, aquele conteúdo relacionado ao conteúdo principal do site. Uma sidebar de links relacionados, e até mesmo toda a área de comentários de um artigo. São conteúdos que possuem uma relação direta ao conteúdo principal.

Semântica independe de posição

O aside não é necessariamente a sidebar do lado direito. Não se prenda a isso. Por exemplo, o header de um site que vi recentemente ficava disposto como uma coluna na esquerda do site, pois era ali que continham as informações de cabeçalho, tais como o logotipo e a nav do site.

Podemos ter sections dentro do footer, do header, do article, dentro de outro section…

Devemos sempre nos lembrar que a disposição é responsabilidade exclusiva do CSS. A semântica nos diz apenas o que cada elemento representa; qual é a informação que aquele conteúdo possui.

Olhe para o teu conteúdo, e deixe que ele te responda o que ele é.

Mensagem do anunciante:

Torne-se um Parceiro de Software Intel®. Filie-se ao Intel® Developer Zone. Intel®Developer Zone

Comente também

22 Comentários

Felipe

Parabéns pelo artigo! Achei animal essa nova semântica.

Uma dúvida: se eu fizer um site com e , ele será renderizado corretamente com os navegadores que não suportam html5?

Ainda temos muita gente usando navegador antigo.

Abraço

    William Bruno

    Oi Felipe!

    Os browsers antigos não reconhecem as novas tags. Mas para ele, basta vc importar o modernizr:
    http://modernizr.com/

    E pronto, tudo resolvido. Irá funcionar “like a charm”

      Felipe

      Valeu William… muito legal essa api!

      Vou fazer meus testes e, quem sabe, no próximo projeto que implementar já não a utilizo!

      Abraço

      Paulo

      William Bruno me corrija se eu estiver errado, mas… Basta adicionar o modernizr e “pronto, está tudo resolvido” ?? Eu sempre achei que o modernizr fosse apenas para lhe informar oq ue o browser em uso suporta ou não suporta e permitir ao desenvolvedor atribuir o que não suporta na “unha”. Não sabia que ele já resolvia os problemas relacionado a tag nova em browser antigo

        William Bruno

        Oi Paulo.
        O modernizr além do que vc disse, também faz com que os browsers antigos comecem a “suportar” as novas tags.

        No ie6 por exemplo, as novas tags html5 não são renderizadas corretamente. Ao incluir o modernizr, elas passam a se comportar corretamente. Por isso o “tudo resolvido”.

        =)

Rodolfo Ribeiro Barreto

William Bruno

Só uma coisa que eu fico na dúvida: Será que fazendo uso das ids nas respectivas tags HTML 5 o internet explorer 6,7,8 vai entender tudo perfeitamente ? Acredito que você tenha inserido essas ids justamente para isso correto ? Porque sinceramente não comecei a utilizar as tags justamente por isso, mas nunca havia pensado nessa possibilidade de usar as ids.

Aguardo resposta.

    William Bruno

    Oi Rodolfo,

    Eu usei aqueles IDs para “exemplificar” e deixar mais claro o código. Você pode usar qualquer nome de ID. O que faz os IEs antigos entenderem as tags, é o modernizr, não importa o ID delas.

    O iMasters está meio tímido com relação ao html5, mas o site da Locaweb por exemplo,(eu faço parte do time que desenvolve ele), está caminhando bem com html5. E temos uma compatibilidade até com o ie6.

Andre Luis de Andrade

Pois é pessoal, essas tags vão ajudar muito na divisão do conteúdo, mas tem o problema do legado. Não testei ainda, mas vamos ver esse Modernizr e estudar a possibilidade de utilizá-lo. O próprio iMasters ainda não usa as tags, imagino que pelo mesmo problema. Um dia será superado :) rs Sucesso à todos!

Danilo Agostinho

Obrigado pelo artigo, Mais William como que ficara a implementação do PHP, mudou alguma coisa?

    William Bruno

    Oi Danilo!! vlw cara.

    Não não.. para o php nada se altera. =)

Rafael Fidelis

Willian Bruno, você se referiu(e vejo muita gente se referindo) como o aside sendo um sidebar, ou algo relativo ao contéudo principal de um artigo ou mesmo do site, porém eu penso diferente, de acordo com o que o seguinte artigo cita:
“The aside element can now represent secondary content when used outside of an article. Keep in mind that aside — and, more generally, secondary content — does not necessarily mean “sidebar”. The style of the content should not dictate the use of the element. For content that is not the primary focus of an article (or page) but is still related to the article (or page), aside is what you need, regardless of its visual design.”

http://html5doctor.com/aside-revisited/

No mais, seria legal também destacar que as / também podem ser utilizados em outros locais do DOM, e não somente como o header principal do site.
No geral , tá bem legal, keep walking!
Att

    William Bruno

    Oi Rafael, note que eu citei como exemplo. Um aside pode ser um sidebar, mas não somente isso.

    Vlw pelo comentário e pelo complemento. O meu texto também tenta deixar claro que um aside não é apenas um sidebar, já vi muita gente afirmando isso erroneamente também.

      Rafael

      Pois é, o nome da tag leva a essa conclusão algumas vezes.
      O final do texto foi cortado, o que eu queria dizer é :
      No mais, seria legal também destacar que as tags header/footer também podem ser utilizados em outros locais do DOM, e não somente como o header/footer principal do site.

        William Bruno

        Eu disse isso =) olha lá a parte do article e da section.

Augusto Tavares

Olá pessoal !! Primeiramente, gostaria de parabenizá-los pelo belíssimo trabalho no portal, realmente esse portal é uma grande referência aos profissionais da área de web !! Eu gostaria de saber se podemos desenvolver unica e exclusivamente já em HTML 5, tenho essa dúvida, porque estou aprendendo Front End e me interessei muitíssimo por HTML5 !!!

    William Bruno

    Oi Augusto, pode sim cara.

    Use as tags que já estão “aprovadas”, e vc não corre nenhum risco. Lembrando de incluir o modernizr ou o html5-shiv(este que faz a compatibilidade, e o modernizr já o incorpora)

    Atualmente todos os meus trabalhos já são desenvolvidos usando as “novas tags”

Marcos Yoshihiro Nakamine

Simples e direto, mas acredito que o bom senso ainda conta bastante.
O HTML5 se usado corretamente melhora a leitura dos mecanismos de busca, mas se usado de forma errada, pioraria ?
Parabéns pelo artigo e obrigado por compartilhar.

Bruno

Perfeito! Pense na tag para criar seu web wireframe.

leonardo

Muito bom, ta me ajudando muitooooo!

Qual a sua opinião?