Como usar o elemento NAV do HTML5

Uma das novidades da Linguagem HTML5 é fornecer aos desenvolvedores de web um conjunto padronizado de estruturas semânticas e tornando a linguagem HTML muito mais inteligente.

O elemento nav da HTML5 representa uma seção de uma página com links para outras páginas do site ou para determinadas partes da mesma página. Esse elemento nada mais é que uma seção com links de navegação. Nem todos os grupos de links, em uma página, precisam estar dentro do elemento nav, somente seções que consistem em blocos de navegação principais são adequadas para o elemento nav.

Atualmente os desenvolvedores utilizam divs para criar blocos de navegação, e isso não pasa nenhum valor semântico aos mecanismos de busca. Pela lógica o poder de indexação será ainda maior com os novos elementos HTML5. Isso tudo por causa da sua estrutura mais semântica. Outra vantagem será para os leitores de tela.

Aplicando o elemento NAV

Você pode utilizar o elemento nav em qualquer lugar do seu site. Dentro do elemento header, footer, section, etc.

Caso você tenha em seu site uma sidebar com uma lista de links para outros sites esses não precisão ser marcados com o elemento nav. O elemento nav não deve ser usado em links mencionados em um parágrafo de conteúdo e também em links no rodapé do tipo “site criado por…”. Apenas aqueles grupos que contém links importantes devem ser englobados por esse elemento.

Forma tradicional de marcação para blocos de navegação.

<div id="navegacao">
  <ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="sobre.html">Sobre</a></li>
	<li><a href="blog.html">Blog</a></li>
  </ul>
</div>

Utilizando o elemento nav.

<nav id="nav-principal">
  <ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="sobre.html">Sobre</a></li>
	<li><a href="blog.html">Blog</a></li>
  </ul>
</nav>

Sempre quando falamos de HTML5 é importante ressaltar que as especificações da linguagem não foram completamente definidas ainda.

Onde podemos aplicar esse elemento

Até o presente momento a especificação diz que o elemento nav deve ser utilizado em qualquer lugar que você considera ser a principal forma que o usuário navega no seu site, como por exemplo:

Por hoje era isso. Forte abraço.

Se quiser me seguir no Twitter: @kadunew