Neste post veremos os principais conceitos e formas de utilização do elemento semântico nav e também como não utilizá-lo.
Como utilizar o elemento semântico nav?
Basicamente o elemento nav serve de seção que contem links ou âncoras
Os links apontando para outras páginas do site e as âncoras apontando para outras regiões do site
Aquela famosa função de rolar a barra do navegador para determinada seção
Quer se especializar em HTML e CSS? Veja o nosso catálogo de cursos.
Considerações importantes:
- Nem todos os links que de um site devem estar em um elemento nav, utilize apenas os importantes nele;
- Uma página pode ter vários elementos nav, um para links e outro para redirecionamento na própria página, por exemplo;
Tome cuidado ao construir seu HTML com os pontos acima pois o Google pode penalizar um código mal escrito
Porém um código semântico e bem escrito, pode te render melhores posições no Google, pois aumenta a sua pontuação de SEO
Utilizando nav na prática
A utilização clássica de nav, é para o elemento que contém os links principais do site e no topo dele
Veja este exemplo de HTML:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Sobre nós</a></li>
<li><a href="#">Minha Conta</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>Aqui criamos uma barra de navegação de um e-commerce, por exemplo
Deixamos explícitos os links da página inicial, produtos, história da empresa, conta do usuário e contato
Então num ambiente de loja virtual estes links podem ser considerados os mais importantes
Porém, como temos outros links que os usuários podem querer acessar como Política de privacidade ou Política de trocas
Podemos adicionar uma outra nav no footer do nosso site com estes outros links mais ‘gerais’
Assim utilizamos mais uma vez de forma correta o a tag nav
E ainda numa página de produto podemos ter um menu de âncora, que tem como finalidade levar o usuário a determinadas características do produto, mas na mesma página dele
Por exemplo: matéria prima e avaliação dos consumidores
São tópicos importantes e que constam na mesma página do produto, e talvez pela sua extensão não exibidos de forma intuitiva ao usuário
Então o menu de âncora com a tag nav poderia ser utilizado neste caso, legal né? 😀
Conclusão
Vimos então que o elemento semântico nav pode ser utilizado tanto para links quanto para redirecionamentos na própria página
Nem todos os links necessitam estar no nav, deve-se escolher os mais importantes
Além disso geralmente a tag nav é utilizada para representar a barra de navegação principal de um site
E por hoje é isso, até o próximo post!
Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo
Referências: MDN