HTML moderno: estrutura, semântica e acessibilidade
Cabeçalhos organizam o documento em seções navegáveis. Eles não são ferramentas de tamanho visual: representam níveis de uma hierarquia. Uma estrutura clara ajuda quem lê rapidamente, usa leitor de tela ou tenta compreender a página por mecanismos de busca.
Organize como um sumário
O <h1> identifica o assunto principal. Cada seção importante recebe <h2>; subseções dentro dela recebem <h3> e assim por diante. Em páginas comuns, um único h1 costuma produzir a experiência mais previsível.
<h1>Guia de cultivo urbano</h1>n<h2>Escolha do local</h2>n<h3>Luz disponível</h3>n<h3>Ventilação</h3>n<h2>Primeiro plantio</h2>Não escolha pelo tamanho
Se o título precisa parecer menor ou maior, ajuste com CSS. Trocar um h2 por h4 apenas pela aparência cria um “buraco” na estrutura e prejudica a navegação por cabeçalhos.
Títulos que informam
Use textos específicos, curtos e únicos dentro da página. Evite cabeçalhos vazios, frases como “Saiba mais” sem contexto e blocos visuais grandes marcados como parágrafo. A hierarquia deve continuar compreensível mesmo sem CSS.
Checklist de qualidade
- Existe um título principal que descreve a página?
- Cada nível abaixo pertence logicamente ao nível anterior?
- A ordem continua clara em uma lista de cabeçalhos?
Pratique agora
Pegue uma página que você já criou, liste apenas seus cabeçalhos e confira se essa lista funciona como um sumário coerente.
