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:
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:
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.
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.