Navegação e conteúdo principal: nav e main

Depois de aprender sobre o cabeçalho e o rodapé da página, vamos mergulhar em duas tags semânticas que definem o coração da sua página: a navegação (<nav>) e o conteúdo principal (<main>).

Essas tags são cruciais para a acessibilidade e para ajudar os mecanismos de busca a entenderem a estrutura e a hierarquia do seu conteúdo.

A tag <nav>: a navegação principal

A tag <nav> representa uma seção de links de navegação. Ela é usada para agrupar os principais links que permitem ao usuário navegar entre as páginas do seu site ou entre seções importantes dentro da mesma página.

O que geralmente vai dentro de uma <nav>?

• Listas de links: Geralmente uma <ul> ou <ol> contendo <li>s com <a>s.
• Links para seções: Links para "Início", "Sobre", "Serviços", "Contato".
• Links para categorias: Em um blog, links para categorias de posts.

Exemplo de <nav>:

<nav>
  <ul>
    <li><a href="/">Início</a></li>
    <li><a href="/sobre">Sobre Nós</a></li>
    <li><a href="/servicos">Serviços</a></li>
    <li><a href="/contato">Contato</a></li>
  </ul>
</nav>

<nav> pode ser usado mais de uma vez?

Sim! Uma página pode ter múltiplos <nav>s. Embora seja comum ter uma <nav> principal (geralmente dentro do <header>), você pode ter outras <nav>s para:

• Navegação secundária: Links de navegação dentro de uma barra lateral (<aside>).
• Navegação de rodapé: Links de navegação no <footer>.
• Navegação de paginação: Links para páginas anteriores/próximas em uma lista de resultados.

Importante: Nem todos os grupos de links precisam estar dentro de uma <nav>. Use <nav> apenas para os principais blocos de navegação. Uma lista de links de redes sociais no rodapé, por exemplo, pode ser apenas uma <ul> dentro do <footer>, a menos que seja considerada uma navegação primária.

A tag <main>: o conteúdo principal

A tag <main> representa o conteúdo principal e único do documento. É o conteúdo que é diretamente relacionado ou expande o tópico central do documento.

Características principais:

• Única na página: Deve haver apenas uma tag <main> por documento HTML.
• Conteúdo principal: Tudo o que está dentro de <main> deve ser o conteúdo que o usuário veio buscar na página.
• Não deve conter: Conteúdo que se repete em várias páginas (como cabeçalhos, rodapés, barras laterais de navegação global, logotipos, formulários de busca). Esses elementos devem estar fora do <main>.

Exemplo de <main>:

<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <h1>Bem-vindo ao Meu Site!</h1>
    <p>Este é o conteúdo principal da minha página. Aqui você encontrará informações relevantes sobre o tópico central.</p>
    <section>
      <h2>Nossos Produtos</h2>
      <p>Conheça nossa linha de produtos inovadores.</p>
    </section>
    <article>
      <h2>Últimas Notícias</h2>
      <p>Fique por dentro das novidades.</p>
    </article>
  </main>

  <footer>
    <nav>...</nav> <!-- Navegação de rodapé pode estar aqui -->
  </footer>
</body>

Por que <main> é tão importante?

• Acessibilidade: Leitores de tela e outras tecnologias assistivas podem usar a tag <main> para permitir que os usuários pulem diretamente para o conteúdo principal da página, ignorando menus de navegação repetitivos ou cabeçalhos. Isso melhora drasticamente a experiência para pessoas com deficiência.
• SEO: Mecanismos de busca podem dar mais peso ao conteúdo dentro de <main>, entendendo que ele é o mais relevante para o tópico da página.
• Organização: Ajuda a organizar o código, separando claramente o conteúdo central dos elementos de suporte.

<nav> e <main> não são apenas <div>s

Assim como <header> e <footer>, <nav> e <main> são elementos de bloco que, visualmente, podem se comportar como <div>s. No entanto, eles carregam um significado semântico que a <div> não tem.

• <nav>: Diz "este é um bloco de navegação".
• <main>: Diz "este é o conteúdo principal e único desta página".

Usar essas tags corretamente é fundamental para construir páginas web acessíveis, otimizadas para busca e fáceis de manter.

Resumindo

• <nav>:
  • Representa uma seção de links de navegação principal.
  • Geralmente contém <ul> ou <ol> com <a>s.
  • Pode haver múltiplos <nav>s na página (principal, secundária, rodapé).
  • Use apenas para blocos de navegação significativos.
• <main>:
  • Representa o conteúdo principal e único do documento.
  • Deve haver apenas uma tag <main> por página.
  • Não deve conter conteúdo repetitivo (cabeçalhos, rodapés, barras laterais globais).
• Ambos são elementos semânticos de bloco que melhoram a acessibilidade, o SEO e a organização do código, comunicando o propósito do conteúdo que envolvem.