Verificação HTML: Um cabeçalho não pode ser filho de outro cabeçalho.

Sobre este problema HTML

De acordo com a especificação HTML, os elementos de cabeçalho (h1–h6) têm um modelo de conteúdo de “phrasing content”, o que significa que só podem conter elementos de nível inline como span, strong, em, a, e nós de texto. Outros elementos de cabeçalho não são phrasing content — são flow content — por isso colocar um cabeçalho dentro de outro é HTML inválido.

Isto importa por várias razões. Leitores de ecrã e outras tecnologias assistivas dependem de uma hierarquia de cabeçalhos bem formada para ajudar os utilizadores a navegar numa página. Quando os cabeçalhos estão aninhados dentro uns dos outros, o esboço do documento torna-se quebrado e confuso, tornando mais difícil para os utilizadores compreenderem a estrutura do conteúdo. Os navegadores podem também tentar “corrigir” a marcação inválida fechando automaticamente o cabeçalho exterior antes de iniciar o interior, o que pode produzir renderização inesperada e estruturas DOM que diferem do que você pretendia.

Existem duas causas comuns deste erro:

Aninhar intencionalmente cabeçalhos para estilo. Os programadores às vezes aninham um h2 dentro de um h1 esperando criar um padrão visual de “cabeçalho principal + subtítulo”. Isto é inválido. Em vez disso, use elementos de cabeçalho separados ou use um elemento span ou p para o subtítulo.
Uma tag de fecho em falta ou mal formada. Se acidentalmente escrever <h3> em vez de </h3> para uma tag de fecho, o navegador vê duas tags de abertura h3 seguidas. O primeiro cabeçalho nunca é fechado adequadamente, e o segundo cabeçalho parece estar aninhado dentro dele.

Exemplos

❌ Cabeçalho aninhado dentro de outro cabeçalho

<h1>Main heading
  <h2>Sub heading</h2>
</h1>

O h2 é filho do h1, o que não é permitido. Para criar um cabeçalho com um subtítulo, use elementos separados:

✅ Cabeçalhos como irmãos

<h1>Main heading</h1>
<h2>Sub heading</h2>

Ou, se o subtítulo deve fazer parte de uma estrutura de documento seccionada:

<main>
  <h1>Main heading</h1>
  <section>
    <h2>Section heading</h2>
    <p>Paragraph content</p>
  </section>
</main>

❌ Barra de fecho em falta causa aninhamento

Um erro tipográfico muito comum é esquecer a / na tag de fecho:

<h3>Meet the Feebles<h3>
<h3>Bad Taste<h3>

Aqui, <h3>Meet the Feebles<h3> abre um segundo h3 em vez de fechar o primeiro. O validador vê o segundo h3 como filho do primeiro. O mesmo problema cascata para cabeçalhos subsequentes.

✅ Tags de cabeçalho adequadamente fechadas

<h3>Meet the Feebles</h3>
<h3>Bad Taste</h3>

❌ Usar cabeçalhos aninhados para hierarquia visual dentro de um cabeçalho

<h1>
  Our Company
  <h3>Established 1999</h3>
</h1>

✅ Usar um `span` para texto suplementar dentro de um cabeçalho

<h1>
  Our Company
  <span class="subtitle">Established 1999</span>
</h1>

Você pode então estilizar a classe .subtitle com CSS para conseguir a aparência visual desejada — por exemplo, exibindo-a numa nova linha com um tamanho de fonte menor:

.subtitle {
  display: block;
  font-size: 0.5em;
  font-weight: normal;
}

✅ Usar o elemento `hgroup`

O elemento hgroup é especificamente desenhado para agrupar um cabeçalho com conteúdo relacionado como subtítulos:

<hgroup>
  <h1>Our Company</h1>
  <p>Established 1999</p>
</hgroup>

Isto mantém a hierarquia de cabeçalhos limpa enquanto semanticamente associa o subtítulo ao cabeçalho. O elemento hgroup é suportado no atual padrão HTML living standard e funciona bem com tecnologias assistivas.