Desenvolvimento HTML

Como utilizar o elemento semântico nav

2 de setembro de 2019

Como utilizar o elemento semântico nav

Neste post veremos os principais conceitos e formas de utilização do elemento semântico nav e também como não utilizá-lo.

elemento semantico nav capa

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x