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