Sistema de Títulos: Regras para H1, H2 e H3

Um sistema de títulos é o conjunto ordenado do título de uma página e seus rótulos de seção. Ele transforma uma página longa em uma rota legível para pessoas e um esboço legível por máquina para mecanismos de busca, tecnologia assistiva e sistemas de resposta de IA.

O título da página acima é o H1 único desta página. Cada especificação principal abaixo é um H2, e qualquer subdivisão dentro de uma seção principal é um H3. Esse esboço ao vivo é o elemento renderizado: seus níveis expressam relações, não tamanhos de fonte.

Por que este elemento é importante

Os leitores raramente consomem uma página longa em uma única leitura ininterrupta. Eles escaneiam em busca de uma pergunta reconhecível, comparam rótulos de seção com sua necessidade atual e decidem onde desacelerar. Títulos descritivos reduzem esse esforço porque cada um faz uma pequena promessa sobre o que vem a seguir. “Como IDs de título estáveis preservam citações” é útil de relance; “Mais alguns pensamentos” não é.

A mesma hierarquia apoia a extraibilidade por máquina, ou seja, um sistema automatizado pode identificar uma seção, entender como ela se relaciona com o tópico da página e recuperá-la sem confundi-la com uma seção vizinha. O H1 estabelece o assunto da página. O H2 divide esse assunto em preocupações primárias. O H3 restringe um H2 a um método, caso, critério ou exceção. Um nível pulado esconde essa relação e força um interpretador a inferir se uma subseção é um irmão, um filho ou um bloco não relacionado.

Os títulos também criam seções endereçáveis. Um identificador de fragmento é a parte de uma URL após #, como #qa-checklist. Resultados de busca, links internos, marcadores do navegador e respostas de IA podem apontar para esse destino exato. Um ID gerado automaticamente e renomeado casualmente pode, portanto, quebrar uma URL mesmo quando a página em si ainda existe. O título não é decoração: seu texto define a seção e seu ID se torna um endereço público durável.

Siga as regras de escrita de elementos quando o propósito de uma seção corresponder a um elemento tipado. Um H2 chamado “Aviso” não substitui uma caixa de aviso, e um H2 chamado “Comparação” não substitui uma tabela de comparação. Títulos fornecem hierarquia de documento; elementos tipados fornecem estrutura específica de propósito. Ambos podem ser necessários.

Quando usar

Use o sistema de títulos em toda página indexável substantiva. Mesmo uma página curta precisa de um H1. Adicione seções H2 quando o leitor precisar navegar entre perguntas, etapas, critérios ou grupos de evidências distintos. Adicione subseções H3 apenas quando um H2 contiver pelo menos duas partes genuinamente distintas que se beneficiem de navegação separada.

Os quase-erros são rótulos visuais que se parecem com títulos, mas não pertencem ao esboço do artigo:

• Um título de card nomeia um card repetido; não é automaticamente uma seção do documento.
• Um rótulo de destaque como “Dica” ou “Importante” identifica o tipo de caixa; não se torna um H2 simplesmente por estar em negrito.
• Um título de gráfico identifica uma figura. Pertence à legenda ou nome acessível da figura, a menos que o gráfico inicie uma seção completa.
• Um rótulo de menu de navegação, breadcrumb, aba, controle de acordeão, título de rodapé e título de modal podem precisar de semântica de componente, mas não entram na hierarquia principal do artigo.
• Um slogan promocional grande é texto de exibição. O tamanho da fonte não pode promovê-lo ao H1 do documento.

Não adicione um título meramente para introduzir uma frase, dividir uma explicação contínua ou criar espaço visual. Use espaçamento entre parágrafos ou edição para essas tarefas. Um título útil marca uma seção suficientemente substancial para responder a uma necessidade distinta do leitor.

Onde posicionar títulos

A posição expressa parentesco. Coloque o H1 no início do conteúdo principal, após breadcrumbs ou outra navegação do site e antes da introdução. Coloque cada H2 antes de uma seção primária. Coloque um H3 apenas após seu H2 pai e o conteúdo de orientação do pai, nunca antes do primeiro H2 e nunca como um par escolhido por aparência visual.

Dois títulos não podem ser adjacentes no conteúdo de artigo escrito. Cada título deve possuir conteúdo útil antes do próximo título do mesmo nível ou nível mais profundo. Esta regra evita rótulos de seção vazios, dá contexto aos leitores antes de uma lista de subseções e cria trechos extraíveis em vez de um esboço simples.

Anatomia

A anatomia rotulada tem cinco partes:

1. H1: o assunto único da página e o topo do esboço de conteúdo.
2. H2: uma pergunta, etapa ou dimensão primária dentro desse assunto.
3. H3: um tópico filho que não pode ser compreendido corretamente sem seu H2 pai.
4. Conteúdo pertencente: a resposta, evidência, instruções ou explicação entre um título e o próximo título no mesmo nível ou superior.
5. ID estável: o destino do fragmento anexado ao título e preservado após a publicação.

A relação permanece válida se a tipografia mudar. Um tema pode renderizar H2 com uma fonte menor no celular, mas deve permanecer H2 no HTML. Por outro lado, tornar um parágrafo grande e em negrito não lhe confere semântica de título ou destino de fragmento.

Exemplos de design

Variantes de design correspondem a níveis semânticos e estados reais de quebra, não a opções de cores arbitrárias.

Título de página H1: mostre o assunto único no início do conteúdo principal. Uma descrição de apoio pode seguir, mas nenhum título auxiliar, logotipo ou slogan de herói se torna outro H1.

Seção primária H2: torne a seção compreensível a partir de um sumário e siga-a com conteúdo que estabeleça o escopo.

Subseção H3: use o nível menor porque o tópico é subordinado, não porque o designer deseja texto menor.

Título quebrado: permita uma quebra natural em duas linhas em telas estreitas. Não encurte um título claro para um rótulo ambíguo apenas para mantê-lo em uma linha.

Estados ancorados: mostre hover e foco de teclado sem tornar a âncora a única maneira de entender o destino. A navegação direta deve compensar qualquer cabeçalho fixo para que o título não fique oculto.

Parâmetros

O sistema de títulos é um contrato de documento, não um componente decorativo. Seus parâmetros definem o esboço, o texto que os leitores veem, o conteúdo que cada nó possui e a URL pela qual esse nó pode ser alcançado.

Os limites de caracteres e palavras são faixas editoriais, não razões para omitir especificidade necessária. Um título de 94 caracteres que distingue dois procedimentos semelhantes é melhor do que um curto, mas enganoso. Os limites estruturais são rigorosos: um H1, sem níveis pulados, sem IDs duplicados e sem seções vazias.

Sintaxe e exemplos de código

A forma portável canônica envolve o esboço nativo em uma diretiva heading-system. O primeiro título mapeia para o título do documento; os títulos posteriores permanecem nós de conteúdo ordenados. IDs explícitos são adicionados assim que os títulos se tornam públicos.

Diretiva Markdown portável

:::heading-system
# Rodar uma chave de API sem tempo de inatividade

Substitua a credencial em todos os serviços dependentes antes de revogar a chave antiga.

## Preparar a substituição

Registre todo serviço que atualmente lê a credencial.

### Identificar consumidores ocultos

Verifique tarefas agendadas, segredos de implantação e integrações locais.

## Verificar e revogar

Teste a substituição e revogue a chave exposta.
:::

Ao publicar, fixe IDs estáveis em vez de permitir que edições futuras de texto os regenerem:

## Preparar a substituição {#prepare-replacement}
### Identificar consumidores ocultos {#identify-hidden-consumers}

Shortcode Hugo

{{< heading-system h1="Rodar uma chave de API sem tempo de inatividade" >}}
## Preparar a substituição {#prepare-replacement}

Registre todo serviço que atualmente lê a credencial.

### Identificar consumidores ocultos {#identify-hidden-consumers}

Verifique tarefas agendadas, segredos de implantação e integrações locais.
{{< /heading-system >}}

Este é o contrato do adaptador Hugo, não uma afirmação de que este repositório registra um shortcode heading-system. Uma implementação Hugo pode continuar a renderizar o H1 a partir do frontmatter e os títulos do corpo via Markdown, como esta página faz, desde que valide a mesma hierarquia e preserve IDs explícitos.

Bloco WordPress

<!-- wp:heading {"level":2,"anchor":"prepare-replacement"} -->
<h2 id="prepare-replacement">Preparar a substituição</h2>
<!-- /wp:heading -->

<p>Registre todo serviço que atualmente lê a credencial.</p>

<!-- wp:heading {"level":3,"anchor":"identify-hidden-consumers"} -->
<h3 id="identify-hidden-consumers">Identificar consumidores ocultos</h3>
<!-- /wp:heading -->

WordPress deve armazenar o H1 no campo de título da página ou bloco de herói aprovado, não como um segundo bloco de título no corpo do artigo. Defina explicitamente a âncora HTML de cada título publicado para que uma edição posterior de texto não altere silenciosamente sua URL.

Exemplos

Bom: o esboço antecipa respostas completas

# Como escolher um fluxo de aprovação de faturas

## Definir o risco de aprovação
Explique quais valores de fatura, fornecedores e exceções precisam de revisão.

### Definir limites de valor
Atribua um aprovador nomeado a cada limite e documente o que acontece no limite.

### Roteirizar exceções de política
Envie ordens de compra ausentes e dados bancários alterados para um caminho de revisão separado.

## Testar o fluxo
Execute faturas comuns e excepcionais por toda a rota antes do lançamento.

Isso funciona porque o H1 declara uma tarefa, cada H2 nomeia uma etapa principal, cada H3 pertence ao seu pai, e cada rótulo é seguido por conteúdo que cumpre sua promessa. Um leitor pode escanear o esboço e prever onde limites, exceções e testes são abordados.

Ruim: estilo substitui hierarquia

# Aprovação de faturas

### Coisas para considerar
## Mais informações
### Exceções
### Outros

Isso falha por quatro razões independentes. Pula de H1 para H3, usa rótulos que não preveem uma resposta, coloca títulos lado a lado sem conteúdo pertencente e deixa “Exceções” sem explicação antes do próximo título. O esboço resultante sugere uma cobertura que a página não oferece. Também cria IDs fracos gerados automaticamente, como #outros, que são ambíguos quando citados fora da página.

Marcação Schema e acessibilidade

Títulos não precisam de um tipo Schema.org independente. O H1 comumente fornece ou espelha o headline de um Article, TechArticle ou outra entidade de página apropriada, mas o texto visível e o JSON-LD devem descrever o mesmo assunto. Seções H2 e H3 permanecem estrutura HTML; não crie uma entidade de schema para cada título. Um título chamado “Perguntas frequentes” também não cria marcação FAQPage por si só — os dados visíveis de perguntas e respostas devem satisfazer o contrato do elemento FAQ.

A acessibilidade depende de HTML semântico e ordem lógica. Usuários de leitores de tela podem navegar por títulos, inspecionar uma lista de títulos ou saltar diretamente entre seções. Esse fluxo de trabalho se quebra quando a página pula níveis por estilo, usa parágrafos em negrito como títulos falsos ou inclui títulos utilitários e de artigo em uma hierarquia incoerente.

Use elementos reais <h1>, <h2> e <h3>. Mantenha o texto do título visível; um aria-label não deve substituir uma redação clara na tela. Controles de âncora precisam de um nome acessível descritivo, foco de teclado visível e um alvo de clique separado do texto do título quando vincular o título inteiro confundiria a seleção. Quando uma URL de fragmento é carregada, o foco do teclado não precisa se mover automaticamente, mas o título de destino deve estar visível e não coberto por um cabeçalho fixo.

Os IDs dos títulos devem ser únicos na página e começar com uma letra. Mantenha-os em minúsculas, hifenizados, legíveis e livres de datas transitórias ou números de posição. Um ID estável pode permanecer #verify-results mesmo se o título visível melhorar de “Verificar os resultados” para “Verificar se a nova credencial funciona”. Se o significado da seção mudar completamente, crie um novo ID e preserve o fragmento antigo por meio de um alias ou comportamento de redirecionamento documentado quando a plataforma suportar. A especificação separada de links de âncora rege a navegação por âncora e os detalhes de interação.

Regras de escrita

Escreva o esboço da página antes de polir rótulos individuais. Cada título deve responder “o que aprenderei, decidirei ou farei aqui?” em linguagem concreta. Prefira “Comparar custos de faturamento mensal e anual” a “Considerações de preço” e “Por que a importação rejeita IDs duplicados” a “Solução de problemas”. Descritivo não significa verboso; significa que o rótulo antecipa o conteúdo real da seção.

Use um H1 de 20 a 80 caracteres. Prefira títulos H2 e H3 de 2 a 12 palavras e no máximo 90 caracteres. Um guia longo normalmente tem de 3 a 12 seções H2. Um H2 precisa de pelo menos uma frase de escopo ou resposta antes de qualquer H3. Use duas ou mais seções H3 sob um pai quando a subdivisão ajudar; um único H3 geralmente sinaliza que seu conteúdo deve ser mesclado ao H2.

Use capitalização de frase a menos que um nome próprio ou nome de produto exija maiúsculas. Perguntas são apropriadas quando a seção responde à pergunta exata imediatamente. Rótulos declarativos servem para etapas, critérios, descobertas e especificações. Mantenha seções paralelas gramaticalmente paralelas: use verbos para uma sequência de processo, substantivos para critérios de comparação ou perguntas para um conjunto de FAQ.

Nunca coloque estes itens dentro do texto do título:

• Links Markdown ou URLs brutas; eles criam destinos concorrentes e nomes acessíveis instáveis.
• Marcadores de nota de rodapé ou citações de fontes; coloque evidências no conteúdo pertencente.
• Emojis usados como rótulos estruturais, selos de status ou prefixos decorativos.
• Numeração manual a menos que o tipo de post defina uma sequência ordenada estável.
• Linguagem de CTA como “Compre agora”, alegações de preço, urgência ou selos promocionais.
• Instruções de estilo, quebras de linha HTML ou abreviações específicas de dispositivo.
• Uma segunda frase que pertence ao parágrafo abaixo.

Não escreva rótulos engenhosos que dependam do texto ao redor para fazer sentido. “A trama se complica” pode servir ao tom de um ensaio, mas não dá a um resultado de busca, sumário, lista de títulos de leitor de tela ou citação de IA nenhum contexto utilizável. Preserve a personalidade na explicação após um título preciso.

Tipos de post que o utilizam

O array postTypes do frontmatter orienta essas relações. Cada tipo de post listado usa o mesmo contrato de hierarquia, enquanto sua própria anatomia determina os nomes e a ordem exatos das seções.

Lista de verificação QA

• A página renderiza exatamente um H1 visível, e ele nomeia o assunto real da página.
• O esboço vai de H1 para H2 para H3 sem níveis pulados.
• Cada H3 tem um pai H2 claro precedente.
• Cada título é seguido por conteúdo pertencente significativo antes do próximo título.
• Cada H2 inclui uma frase de orientação ou resposta antes de seu primeiro H3.
• O texto do título é descritivo quando lido isoladamente em um sumário ou lista de títulos de leitor de tela.
• Seções paralelas usam gramática paralela e níveis equivalentes.
• Os níveis de título refletem relações, não tamanho de fonte ou peso visual desejado.
• Propósitos tipados ainda usam seus elementos obrigatórios; títulos não imitam componentes.
• Cada título publicado tem um ID de fragmento único, legível e estável.
• IDs de fragmento existentes permanecem inalterados quando o texto visível é editado sem alterar o significado da seção.
• A navegação direta por fragmento deixa o destino visível abaixo de qualquer cabeçalho fixo.
• O texto do título não contém links, citações, rótulos de emoji, selos promocionais ou quebras de linha manuais.
• O esboço HTML permanece coerente com menus, cards, acordeões, modais e outros componentes da página presentes.
• A página renderizada funciona em largura estreita, com títulos de duas linhas quebrando sem cortes ou sobreposição.

Rejeite a página quando o design visual parecer polido, mas o esboço falhar. Defeitos de título se acumulam: um nível pulado ou seção vazia faz com que cada consumidor downstream trabalhe mais para reconstruir relações que a fonte deveria ter declarado diretamente.

FAQ

As perguntas abaixo resolvem os casos com maior probabilidade de criar esboços inconsistentes entre editores e plataformas. Seus valores autoritativos vivem no frontmatter estruturado [[faq]] acima, para que a saída visível e qualquer saída de schema elegível possam compartilhar uma fonte.