Se você não leu o primeiro artigo da série, é interessante que o faça agora.
O elemento nav
representa uma seção da página que contém link para outras páginas ou partes do mesmo website. Resumindo: nav
é uma seção de links de navegação.
Essa definição é muito mais complexa do que se imagina. A tag nav
pode agrupar uma série de elementos que anteriormente faríamos com div
. Nem todos os grupos de links da página precisam ser um elemento nav
, mas apenas as seções que consitem em blocos principais. Imagine uma sidebar (agora descrito com a tag aside
) com uma série de links, como por exemplo uma sidebar de um portal como o G1, R7, UOL e etc… Nestas sidebars é normal você encontrar os diversos links das diversas categorias de assuntos. Anteriormente, se quiséssemos agrupar por exemplo um Título e uma lista de links faríamos assim:
<div class="categ categ-esporte"> <h3>Esporte</h3> <ul> <li><a href="#">Copa 2014</a></li> <li><a href="#">Brasileirão</a></li> <li><a href="#">Fórmula 1</a></li> <li><a href="#">Baskete</a></li> </ul> </div>
Resolvia nosso problema de formatação. Poderíamos utilizar div
que envolve o título e a lista para fazer algum detalhe visual e etc. Mas a nível de informação, não havia nenhuma indicação de que o título estivesse ligado ao conteúdo. Não há nenhuma referência de que o título ESPORTE apresenta a lista de links sobre esporte abaixo. Os sistemas de busca não podem se basear apenas na posição dos elementos, é algo muito genérico para eles confirmarem que a lista e o título que a precede estão ligados em um mesmo assunto.
Com o HTML5, isso muda. Veja o código abaixo:
<nav class="categ categ-esporte"> <h3>Esporte</h3> <ul> <li><a href="#">Copa 2014</a></li> <li><a href="#">Brasileirão</a></li> <li><a href="#">Fórmula 1</a></li> <li><a href="#">Baskete</a></li> </ul> </nav>
Com a tag nav
, há uma indicação de que aquele grupo é uma seção (nav
é um tipo de section
. Enquanto a tag section
serve para indicar seções no site, a tag nav
indica que um determinado grupo é uma seção de navegação) é um bloco de navegação.
Dentro da nav
você pode agrupar uma série de listas de links.
<nav> <ul> <li><a href="#">Copa 2014</a></li> <li><a href="#">Brasileirão</a></li> <li><a href="#">Fórmula 1</a></li> <li><a href="#">Baskete</a></li> </ul> <ul> <li><a href="#">Educação</a></li> <li><a href="#">Dicionários</a></li> <li><a href="#">Vestibular</a></li> </ul> <ul> <li><a href="#">Cotidiano</a></li> <li><a href="#">Política</a></li> <li><a href="#">Jornais</a></li> </ul> </nav>
A tag nav
também pode estar em todos os elementos do HTML. Você pode colocá-la no header
para definir menus, no footer
para definir grupos de links, sidebars, articles e etc.