12/05/2019 Html5 – tag NAV – O Desenvolvedor

O DESENVOLVEDOR
11 anos escrevendo sobre código

20 DE SETEMBRO DE 2010 POR GSERRANO

Html5 – tag NAV

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í cas 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, de na 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.

https://odesenvolvedor.com.br/html5-tag-nav_1888.html 1/3
12/05/2019 Html5 – tag NAV – O Desenvolvedor

SEO e a tag <nav>

Além da questão da acessibiliade e semântica sem dúvida a <nav> vai in uenciar 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 car 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 classi cado 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.

https://odesenvolvedor.com.br/html5-tag-nav_1888.html 2/3
12/05/2019 Html5 – tag NAV – O Desenvolvedor

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

U N C AT E G O R I Z E D

F R O N T- E N D , H T M L 5 , I N T E R N E T , P R O G R A M A C A O , W E B

https://odesenvolvedor.com.br/html5-tag-nav_1888.html 3/3