Tags de Navegação

2.1 Links Âncora

Navegar dentro de uma página HTML ajuda os usuários a moverem-se rapidamente para diferentes seções do documento. Isso é especialmente útil para páginas longas com muito conteúdo. No HTML, há várias maneiras de implementar esse tipo de navegação, incluindo o uso de links âncora, atributo id, assim como navegação com JavaScript.

Links Âncora — são a forma mais comum de navegação dentro de uma página. Eles permitem que os usuários vão para partes específicas do documento usando tags âncora.

Exemplo de uso:

Criando âncoras com o atributo id:

    
      <h2 id="section1">Seção 1</h2>
      <p>Conteúdo da seção 1...</p>
      <h2 id="section2">Seção 2</h2>
      <p>Conteúdo da seção 2...</p>
      <h2 id="section3">Seção 3</h2>
      <p>Conteúdo da seção 3...</p>
    
  

Criando links para âncoras:

    
      <nav>
        <ul>
          <li><a href="#section1">Ir para Seção 1</a></li>
          <li><a href="#section2">Ir para Seção 2</a></li>
          <li><a href="#section3">Ir para Seção 3</a></li>
        </ul>
      </nav>
    
  

Navegação com Atributo name

O atributo name também pode ser usado para criar âncoras, embora seu uso seja menos comum e considerado obsoleto.

Exemplo

    
      <a name="top"></a>
      <p>Topo da página...</p>
      <a name="bottom"></a>
      <p>Fundo da página...</p>
      <nav>
        <ul>
          <li><a href="#top">Ir para o Topo</a></li>
          <li><a href="#bottom">Ir para o Fundo</a></li>
        </ul>
      </nav>
    
  

2.2 Rolagem com JavaScript

JavaScript oferece possibilidades mais flexíveis para navegação dentro da página. Com métodos como scrollIntoView, scrollTo e outros, é possível implementar uma rolagem suave para diversos elementos da página.

Exemplo de uso:

Este código rola suavemente a página para o elemento especificado ao pressionar um botão.

    
      <button onclick="scrollToSection('section1')">Ir para Seção 1</button>
      <button onclick="scrollToSection('section2')">Ir para Seção 2</button>
      <button onclick="scrollToSection('section3')">Ir para Seção 3</button>

      <h2 id="section1">Seção 1</h2>
      <p>Conteúdo da seção 1...</p>
      <h2 id="section2">Seção 2</h2>
      <p>Conteúdo da seção 2...</p>
      <h2 id="section3">Seção 3</h2>
      <p>Conteúdo da seção 3...</p>
    
  

    
     // Função para rolagem suave para uma seção específica na página
      function scrollToSection(sectionId) {
        // Encontrar elemento pelo ID
        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
      }
    
  

2.3 Tag <nav>

A tag <nav> no HTML5 é destinada a definir a seção da página que contém links de navegação. Esta tag ajuda a identificar semanticamente os blocos de navegação, melhorando a estrutura da página web e tornando-a mais acessível tanto para os usuários como para os motores de busca.

A tag <nav> é usada para agrupar links destinados à navegação no site ou dentro do documento atual. Isso pode incluir menus principais, menus secundários, breadcrumbs, listas de páginas e outros elementos de navegação.

Sintaxe

    
      <nav>
        <!-- Elementos de navegação -->
      </nav>
    
  

Exemplo de uso

    
      <header>
        <h1>Meu site</h1>
        <nav>
          <ul>
            <li><a href="#home">Início</a></li>
            <li><a href="#about">Sobre nós</a></li>
            <li><a href="#services">Serviços</a></li>
            <li><a href="#contact">Contatos</a></li>
          </ul>
        </nav>
      </header>
    
  

Explicação

• Tag <header>: usada para criar o cabeçalho da página, que inclui o menu de navegação
• Tag <nav>: contém uma lista de links que levam a diferentes seções da página
• Tag <ul> e <li>: usadas para criar uma lista de links de navegação
• Tag <a>: define os links que os usuários podem clicar para navegar para outras partes da página ou site

2.4 Aplicação da tag <nav>

A tag <nav> é usada para agrupar links de navegação, como:

• Menu principal do site
• Menus secundários
• Breadcrumbs
• Links de paginação
• Outros links de navegação

Menu principal do site

    
      <nav>
        <ul>
          <li><a href="#home">Início</a></li>
          <li><a href="#about">Sobre nós</a></li>
          <li><a href="#services">Serviços</a></li>
          <li><a href="#contact">Contatos</a></li>
        </ul>
      </nav>
    
  

Menu Secundário

    
      <nav>
        <ul>
          <li><a href="#faq">Perguntas Frequentes</a></li>
          <li><a href="#support">Suporte</a></li>
          <li><a href="#privacy">Política de Privacidade</a></li>
        </ul>
      </nav>
    
  

Breadcrumbs

    
      <nav aria-label="breadcrumb">
        <ol>
          <li><a href="/home">Início</a></li>
          <li><a href="/category">Categoria</a></li>
          <li>Página Atual</li>
        </ol>
      </nav>
    
  

Vantagens do uso da tag <nav>

Marcação Semântica

Usar a tag <nav> ajuda os motores de busca e tecnologias assistivas para pessoas com deficiências a entenderem melhor a estrutura da página. Isso torna o site mais acessível e melhora seu SEO.

Melhoria da Estrutura da Página

A tag <nav> separa claramente os elementos de navegação do conteúdo principal, o que torna a marcação da página mais lógica e estruturada.

Facilidade de Estilização

Elementos de navegação dentro da tag <nav> são fáceis de estilizar com CSS para melhorar a aparência e a usabilidade.