Títulos e seções

No Laboratório Belavista, títulos organizam o cartaz, a oficina e o blog do ateliê. A hierarquia h1–h6 é o mapa do documento — não um seletor de tamanho de fonte.

O exemplo deste capítulo é 05-titulos-e-secoes, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Usar um h1 principal por página (na prática didática deste volume).
• Descer níveis sem pular (h2 sob h1, h3 sob h2).
• Ligar seções a títulos com aria-labelledby quando fizer sentido.
• Distinguir título visual (CSS) de título estrutural (HTML).
• Revisar o outline mental da página.

Um mapa, não um menu de tamanhos

h1 é o título principal da página (“Oficinas de outono”). h2 abre grandes blocos (“Agenda”, “Materiais”). h3 aprofunda (“Tinta”, “Papel”). Não escolha h4 só porque “fica menor”. CSS muda tamanho; HTML muda estrutura.

Pular de h1 para h4 quebra o mapa para quem navega por títulos no leitor de tela.

Seções com título

Uma section deve ter um título acessível — em geral um h2 ou h3 dentro dela. Você pode reforçar com:

<section aria-labelledby="agenda-titulo">
  <h2 id="agenda-titulo">Agenda</h2>
  …
</section>

Assim o nome da região fica explícito.

Header de página versus header de seção

O header do site (logo + nav) é diferente do header interno de um article. Ambos são válidos. O título da página costuma ser o h1 dentro de main ou no header principal — escolha um lugar e seja consistente no projeto-fio.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Títulos e seções — Belavista</title>
  </head>
  <body>
    <header>
      <p>Laboratório Belavista</p>
    </header>
    <main>
      <h1>Oficinas de tipografia</h1>
      <section aria-labelledby="sec-agenda">
        <h2 id="sec-agenda">Agenda</h2>
        <h3>Sábado — composição</h3>
        <p>Manhã de composição com tipos móveis (conteúdo fictício).</p>
        <h3>Domingo — impressão</h3>
        <p>Impressão de cartazes em prensa (conteúdo fictício).</p>
      </section>
      <section aria-labelledby="sec-materiais">
        <h2 id="sec-materiais">Materiais</h2>
        <p>Papel reciclado, tinta à base d’água e tipômetro.</p>
      </section>
    </main>
  </body>
</html>

Erro comum

Erro comum: vários h1 competindo (“Belavista”, “Cartaz”, “Oficina”) só para destacar visualmente. Deixe um h1; o resto desce na hierarquia. Destaque visual é trabalho do CSS.

Outro erro: usar b ou p grande no lugar do título. Sem heading, não há estrutura.

Critério

Você avança se, lendo só os headings do exemplo, consegue contar a história da página em ordem.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Por que não usar h3 logo abaixo do h1 sem um h2 no meio, neste volume?
2. Qual o papel de aria-labelledby na section?
3. Se o design pede um título “enorme” que não é o tema da página, o que você faz?

Respostas comentadas

1. A hierarquia deve descer um nível por vez para manter o outline previsível. Pular níveis atrapalha navegação por títulos.
2. Associar a região ao id do título, nomeando a seção para tecnologias assistivas.
3. Mantém a hierarquia correta no HTML e estiliza o tamanho no CSS — ou usa um elemento semântico adequado sem fingir que é o h1 da página.