Nav Html

Nav HTML – Como usar o elemento nav do HTML

A tag <nav> define um conjunto de links de navegação do menu.

Observe que não todos os links de um documento devem estar dentro de um <nav> elemento do html5. 

O elemento <nav> destina-se apenas ao bloco principal de links de navegação.

O nav é um elemento do html5 usado para  indicar uma seção dos principais links de navegação em uma página.

Nem todos os links devem ser agrupados em um elemento nav. ou seja, a navegação deve ser reservada para seções de navegação primária.

Onde podemos aplicar o tag <nav> no html ?

Navegação primária: Menu Superior Principal – ( Home, sobre, serviços, contato…)
Navegação Secundária – Menu Inferior – ( Sidebar, Lista de categorias, Paginação …)

Como funciona?

• Semântica: Ao usar a tag <nav>, você está fornecendo uma informação semântica importante para os navegadores, motores de busca e outros agentes de usuário. Isso significa que eles entendem que o conteúdo dentro da tag está relacionado à navegação do site.
• Organização do código: Agrupar os links de navegação dentro de um <nav> torna seu código mais organizado e fácil de entender, tanto para você quanto para outros desenvolvedores que trabalharem no seu projeto.
• Acessibilidade: Para usuários de tecnologias assistivas, como leitores de tela, a tag <nav> ajuda a identificar as áreas de navegação da página, facilitando a navegação e a compreensão do conteúdo.

Onde usar o <nav>?

• Navegação principal: É o local mais comum para usar o <nav>. Geralmente, a navegação principal está localizada no cabeçalho da página e contém links para as seções principais do seu site (Home, Sobre, Produtos, Contato, etc.).
• Navegação secundária: Você pode usar múltiplos elementos <nav> em uma mesma página para diferentes tipos de navegação. Por exemplo, uma navegação secundária pode conter links para subseções de uma determinada página.
• Navegação dentro da página: Se sua página for muito longa, você pode usar o <nav> para criar links internos que levem o usuário para diferentes seções da mesma página, como um sumário ou um índice.

Veja um exemplo do elemento nav no html5

<nav class="menu">
  
  <ul>
  
      <li><a href="index.html" title="Home">Home</a></li>
      <li><a href="html5.html" title="Html5">Html5</a></li>
      <li><a href="css3.html" title="Css3">Css3</a></li>
      <li><a href="jquery.html" title="jQuery">jQuery</a></li>
      <li><a href="contato.html" title="Contato">Contato</a></li>
 
  </ul>

</nav>

Veja mais Tags Html: Códigos Html Prontos