Títulos e parágrafos
Toda página com texto de verdade precisa de uma hierarquia clara entre o que é assunto principal e o que é subtópico.
Estudar esta lição interativa →Pense num artigo de jornal sem nenhum título em destaque, tudo com a mesma aparência: o leitor precisaria ler a matéria inteira só para descobrir do que ela trata. Títulos existem para resolver exatamente isso, dar ao leitor (e a quem navega por atalhos, como leitores de tela) um jeito rápido de entender do que se trata cada parte antes de mergulhar no texto.
O HTML tem seis níveis de título, de <h1> (o mais importante) até <h6> (o menos importante), e o texto corrido vai em <p> (parágrafo). Uma página deve ter, idealmente, um único <h1>, o assunto principal daquela página, e os demais níveis vão descendo conforme o texto se aprofunda em subtópicos.
Pense na hierarquia de títulos como o sumário de um livro: o h1 é o título do livro, o h2 é o título de cada capítulo, o h3 seria uma seção dentro do capítulo. Ninguém abre um capítulo novo sem ter fechado (ou pelo menos começado) o anterior, e ninguém pula do capítulo 1 direto para uma subseção 1.3.2 sem passar pelo 1.3. A hierarquia dos títulos numa página segue essa mesma lógica de aninhamento.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Um h1 (assunto principal) com dois h2 (subtópicos), cada um com seu parágrafo.
Um exemplo do dia a dia: praticamente qualquer artigo de blog, notícia ou documentação técnica segue esse padrão, um h1 com o título da matéria, e h2 marcando cada seção interna ("Introdução", "Como funciona", "Conclusão"). É esse esqueleto de títulos que faz o Google entender do que trata a página, e que permite a quem usa leitor de tela pular direto para a seção que interessa, sem precisar ouvir o texto inteiro.
Dois deslizes aparecem o tempo todo: usar mais de um h1 na mesma página (que confunde qual é, de fato, o assunto principal) e pular níveis, como ir de h2 direto para h4 só porque o texto menor "parece melhor" naquele ponto. Se você quer um texto menor por razão puramente visual, isso é assunto de CSS; a escolha do nível do título deve refletir a hierarquia real do conteúdo, não o tamanho da fonte. Vamos voltar a este ponto com mais força no módulo de acessibilidade.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Monte a hierarquia de títulos e parágrafos.