Hierarquia de títulos e estrutura lógica da página

Entenda como usar h1–h6 de forma correta para criar uma estrutura de leitura lógica, especialmente para leitores de tela.

Imagine um livro sem capítulos, subcapítulos ou seções, apenas um longo bloco de texto. Seria impossível de ler e entender, certo? O mesmo vale para uma página web. A forma como você organiza seus títulos e o conteúdo é fundamental para a legibilidade, a compreensão e, principalmente, a acessibilidade.

A hierarquia de títulos (usando as tags <h1> a <h6>) e a estrutura lógica da página são pilares para criar um conteúdo que possa ser facilmente navegado e compreendido por todas as pessoas, incluindo aquelas que usam tecnologias assistivas.

As tags de título: <h1> a <h6>

As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> são usadas para definir títulos e subtítulos em um documento HTML. Elas representam diferentes níveis de importância e hierarquia.

  • <h1>: O título mais importante da página. Deve haver apenas um <h1> por página, representando o tópico principal ou o nome da página.
  • <h2>: Subtítulos de segundo nível, que dividem o conteúdo principal em seções.
  • <h3>: Subtítulos de terceiro nível, que dividem as seções em subseções.
  • E assim por diante, até <h6>.

Exemplo de hierarquia correta:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Artigo sobre Acessibilidade</title>
</head>
<body>

  <h1>Acessibilidade Web: Um Guia Completo</h1>
  <p>Introdução ao tema...</p>

  <h2>Por que a Acessibilidade Importa?</h2>
  <p>Explicação dos benefícios...</p>

  <h3>Inclusão Social</h3>
  <p>Detalhes sobre inclusão...</p>

  <h3>Benefícios para SEO</h3>
  <p>Detalhes sobre SEO...</p>

  <h2>Como Implementar Acessibilidade</h2>
  <p>Visão geral das técnicas...</p>

  <h3>HTML Semântico</h3>
  <p>Explicação do HTML semântico...</p>

  <h4>Atributo Alt em Imagens</h4>
  <p>Detalhes sobre o alt...</p>

  <h4>Labels em Formulários</h4>
  <p>Detalhes sobre labels...</p>

</body>
</html>

Regras de ouro para títulos:

  1. Apenas um <h1> por página: O <h1> deve ser o título principal e único da página. Pense nele como o título do livro.
  2. Não pule níveis: Mantenha uma sequência lógica. Não vá de <h1> para <h3> diretamente. Se você precisa de um <h3>, ele deve estar dentro de um <h2>.
  3. Não use títulos para estilização: Não use <h1> porque ele é grande e negrito. Use-o porque o conteúdo é o título principal. A estilização deve ser feita com CSS.
  4. Seja descritivo: Os títulos devem resumir o conteúdo da seção que eles introduzem.

Estrutura lógica da página: Elementos Semânticos

Além dos títulos, o HTML5 nos trouxe uma série de elementos semânticos que ajudam a estruturar a página de forma lógica e compreensível. Esses elementos dão significado ao conteúdo, não apenas aparência.

Elementos semânticos importantes:

  • <header>: Representa o cabeçalho de uma seção ou da página. Geralmente contém o logotipo, título do site, navegação.
  • <nav>: Contém links de navegação (menus).
  • <main>: Representa o conteúdo principal do <body>. Deve haver apenas um <main> por página.
  • <article>: Representa um conteúdo independente e auto-contido (ex: um post de blog, uma notícia).
  • <section>: Representa uma seção genérica de conteúdo. É um agrupamento temático de conteúdo.
  • <aside>: Contém conteúdo relacionado, mas que pode ser considerado separado do conteúdo principal (ex: barras laterais, caixas de citação).
  • <footer>: Representa o rodapé de uma seção ou da página. Geralmente contém informações de copyright, links de contato.

Exemplo de estrutura semântica:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meu Blog de Tecnologia</title>
</head>
<body>

  <header>
    <img src="logo.png" alt="Logo do Meu Blog de Tecnologia">
    <h1>Meu Blog de Tecnologia</h1>
    <nav>
      <ul>
        <li><a href="/">Início</a></li>
        <li><a href="/artigos">Artigos</a></li>
        <li><a href="/sobre">Sobre</a></li>
        <li><a href="/contato">Contato</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Título do Artigo Principal</h2>
      <p>Conteúdo do artigo...</p>
      <section>
        <h3>Subseção 1</h3>
        <p>Conteúdo da subseção...</p>
      </section>
      <section>
        <h3>Subseção 2</h3>
        <p>Conteúdo da subseção...</p>
      </section>
    </article>

    <aside>
      <h3>Artigos Populares</h3>
      <ul>
        <li><a href="#">Artigo X</a></li>
        <li><a href="#">Artigo Y</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 Meu Blog de Tecnologia. Todos os direitos reservados.</p>
  </footer>

</body>
</html>

Por que a hierarquia de títulos e a estrutura lógica importam para a acessibilidade?

1. Navegação para Leitores de Tela

  • Usuários de leitores de tela frequentemente navegam por uma página pulando de título em título. Uma hierarquia clara permite que eles tenham uma visão geral do conteúdo e pulem diretamente para as seções de interesse, como se estivessem folheando um sumário.
  • Elementos semânticos como <nav>, <main>, <article> também permitem que os leitores de tela ofereçam atalhos para pular diretamente para essas regiões, melhorando a eficiência da navegação.

2. Compreensão e Contexto

  • Uma estrutura lógica ajuda todos os usuários a entenderem a relação entre as diferentes partes do conteúdo.
  • O uso correto dos títulos e elementos semânticos fornece contexto e significado, mesmo sem a apresentação visual.

3. SEO

  • Mecanismos de busca usam a estrutura de títulos e os elementos semânticos para entender a organização e a importância do conteúdo da sua página. Uma boa estrutura pode melhorar o ranqueamento.

Resumindo

  • A hierarquia de títulos (<h1> a <h6>) e a estrutura lógica da página são cruciais para a legibilidade e acessibilidade.
  • Regras para títulos:
    • Apenas um <h1> por página (título principal).
    • Não pule níveis (<h1> -> <h2> -> <h3>).
    • Use títulos pelo seu significado, não pela aparência.
  • Elementos semânticos (HTML5):
    • header, nav, main, article, section, aside, footer.
    • Dão significado ao conteúdo e ajudam a organizar a página.
  • Benefícios para acessibilidade:
    • Permitem que usuários de leitores de tela naveguem eficientemente.
    • Melhoram a compreensão e o contexto para todos os usuários.
    • Contribuem para o SEO.

Construir uma estrutura de página sólida e semântica é um dos passos mais importantes para criar uma web mais inclusiva.