Tableless

Busca Menu

Sections: elemento nav – Parte 2

Seja o primeiro a comentar por

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.

Publicado no dia