O Desenvolvedor

Se tudo der certo esta semana eu vou participar do curso de HTML5 da W3C e para me preparar para o curso eu dei continuidade aos meus estudos e testes com HTML5.

Prometi que vou abordar em posts por aqui algumas tags específicas do HTML5, já expliquei a importância do uso do html5 doctype, hoje vou falar da tag NAV, que traz melhorias na semântica e consequentemente na indexação das páginas.

<nav>

A tag <nav>, como o nome indica, defina uma seção de navegação no documento – uma lista de links. No HTML4 ainda é comum ver menus de navegação com o seguinte código:

<ul class="nav">
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="Sobre">Sobre</a></li>
    <li><a href="#" title="Contato">Contato</a></li>
</ul>

Com as mudanças do HTML5 alguns microformats foram transformados em tags, o <nav> é uma delas. Um menu agora poderá ser escrito da seguinte forma:

<nav>
    <a href="#">Home</a>
    <a href="#">Sobre</a>
    <a href="#">Contato</a>
</nav>

Uma seção focada na navegação melhora a semântica do documento e pode facilitar muito a navegação através de leitores de tela, melhorando a acessibilidade do site.

Segundo a W3C elementos como "próximo" e "anterior" devem estar dentro de uma <nav>, portanto acredito que a tag também pode ser usada para paginação, por exemplo.

SEO e a tag <nav>

Além da questão da acessibiliade e semântica sem dúvida a <nav> vai influenciar na indexação dos buscadores, visto que os links são os canais do "juice" das páginas. Acredito que o uso não deve ficar preso apenas a menu e a o <nav> deve ser aplicado a qualquer  "seção de navegação" da sua página, por exemplo:

• Menu principal
  Exemplo acima, menu no header ou barra lateral para as páginas principais do site
• Histórico
  No caso de blogs é comum ter um "histórico" – é uma seção de navegação, faz sentido o uso da classe
• Próximo / Anterior e paginação
  Também são elementos de navegação e bastante usados em muitos blogs.
• Breadcrumb
  Importante para a navegação do site, semanticamente faz muito sentido estar classificado como navegação.
• Lista de links dentro do conteúdo
  Bacana para a navegação e importante para SEO, é como o uso de ferramenta de links recomendados, que adivinha só? É um conjunto para navegação… 😉

 

Dicas

Algumas coisas que acho que vale a pena ressaltar…

<nav> não é <menu>

No html5 existe a tag menu e isso pode causar confusão em alguns desenvolvedores, porém para o menu de navegação de um site o correto é o uso do <nav>. A descrição da tag menu é que ela é uma lista de comandos, então faz mais sentido o uso dela em aplicações web onde o menu é utilizado para listar comandos, e não links de navegação.

Utilize o doctype correto

Você precisa dizer para o seu navegador como ele deve interpretar o seu documento, para isso utilize o doctype do HTML5 sempre que ele for utilizado.

<nav> aceita listas

Acabei de questionar no curso de HTML5 sobre o uso de <nav> e lsitas, não é necessário utilizar uma lista dentro do elemento <nav>, portanto você pode ter o seguinte:

<nav>
  <li><a href="#" title="Title">Item</a></li>
  <li><a href="#" title="Title">Item</a></li>
  <li><a href="#" title="Title">Item</a></li>
  <li><a href="#" title="Title">Item</a>
     <nav>
        <li><a href="#" title="Title">Item</a></li>
        <li><a href="#" title="Title">Item</a></li>
      </nav>
  </li>
  <li><a href="#" title="Title">Item</a></li>
</nav>
 

O <nav> não é um UL, ele aceita parágrafos, listas, links, etc. 🙂