HTML5 e as novas tags de estrutura [Parte 1]

HTML5 new structural tagsNa construção de um documento HTML, as tags utilizadas para atribuir significância ao conteúdo – os headings (h1-h6) – são os “responsáveis” pelo outline do conteúdo. A tag div, um elemento genérico sem qualquer peso semântico, foi o recurso encontrado pelos developers, designers e webmasters para agrupar o conteúdo espacialmente.
Imagine a seguinte estrutura, em que o documento estará dividido entre um cabeçalho, a área central à esquerda (a maior) onde teremos o conteúdo principal, a área adjacente contará com tópicos relacionados com o tema da página, e por fim teremos um rodapé.

site_exemplo

Até então, iriamos criar elementos div com id name ou class name alusivos ao conteúdo que estará presente no seu interior. No entanto essas “semânticas” servem somente como pontos de âncora para que os developers, designers e webmaster possam atribuir comportamento visuais e de interacção, através de CSS e JavaScript, pois as verdadeiras secções terão de ser feitas através de uma correcta utilização dos headings.

Em 2005, o Google analizou mais de um milhão de páginas e, três anos mais tarde, o Opera analizou cerca de quatro milhões. Ambos procuraram a mesma coisa, quais os nomes mais utilizados para atribuir significado a essas divs.

Em Outubro de 2014, o HTML5 passou a ser uma recomendação do W3C, ou seja, passou a ser o standard. Nesse documento constam quatro novas tags estruturais que foram retiradas dessa análise feita anteriormente. As novas tags estruturais são article, section, nav, aside. Iremos abordar os diferentes elementos em artigos distintos.

Comecemos pela definição do elemento nav segundo a recomendação de 28 Outubro de 2014 presente no site do W3C:

“Uma nav representa uma secção da página que liga a outras páginas ou partes dentro da mesma: uma secção com links de navegação(…)”

Este é, talvez, o novo elemento cuja interpretação é mais simples. Vejamos como é que o tradicional elemento ul, utilizado como menu de navegação será alterado:

HTML 4.1

<ul id="nav">
   <li><a>link1</a></li>
   <li><a>link2</a></li>
</ul>

HTML 5

<nav>
   <ul>
      <li><a>link1</a></li>
      <li><a>link2</a></li>
   </ul>
</nav>

Note que se eliminou o atributo id=”nav” do elemento ul.

html5_outliner

Ao visualizarmos o documento acima, através de um
HTML5 Outliner como a extensão “Headings Map” para o Google Chrome, é possível ver a secção que o elemento nav faz.

Repare que o Outliner marcou os elementos nav como um erro, e tal se deve ao facto de não ter atribuído qualquer heading à nav.

No próximo artigo continuaremos a analisar os novos elementos estruturais de HTML5 e no final será então possível compararmos as estruturas criadas na produção da página acima.

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *