O elemento “h2” não deve aparecer como descendente do elemento “dt”.

O elemento dt representa um termo ou nome numa lista de descrição (dl). De acordo com a especificação HTML, o seu modelo de conteúdo está restrito a conteúdo de frase, o que significa que só pode conter elementos de nível de texto. Elementos de cabeçalho (h1 até h6) são conteúdo de fluxo, não conteúdo de frase, por isso aninhar estes dentro de um dt é HTML inválido.

Esta restrição existe porque dt foi concebido para rotular ou nomear algo, enquanto os cabeçalhos definem a estrutura organizacional de um documento. Misturar os dois cria semânticas conflituosas — leitores de ecrã e outras tecnologias assistivas podem interpretar incorretamente a hierarquia de cabeçalhos do documento, levando a uma experiência confusa para utilizadores que navegam por cabeçalhos. Os navegadores também podem lidar com o aninhamento inválido de forma inconsistente, potencialmente quebrando o layout ou a estrutura lógica da lista de descrição.

Este problema surge comumente quando os programadores querem estilizar visualmente um termo de definição como um cabeçalho. A abordagem correta é reestruturar a marcação para que o cabeçalho fique fora do dt, ou estilizar o dt diretamente com CSS para obter a aparência visual desejada sem usar incorretamente elementos de cabeçalho.

Como corrigir

Você tem várias opções:

1. Mover o cabeçalho antes da lista de descrição. Se o cabeçalho introduz um grupo de termos, coloque-o acima do elemento dl.
2. Colocar o cabeçalho dentro de um elemento dd. O elemento dd aceita conteúdo de fluxo, por isso os cabeçalhos são válidos lá.
3. Estilizar o dt com CSS. Se só precisa que o termo pareça um cabeçalho, aplique tamanho de fonte, peso e outros estilos diretamente ao dt sem envolver o seu conteúdo num elemento de cabeçalho.

Exemplos

❌ Inválido: cabeçalho dentro de um dt

<dl>
  <dt>
    <h2>API Reference</h2>
  </dt>
  <dd>Documentation for the public API.</dd>
</dl>

O h2 é descendente de dt, o que viola o modelo de conteúdo.

✅ Válido: cabeçalho colocado antes da lista de descrição

<h2>API Reference</h2>
<dl>
  <dt>Endpoint</dt>
  <dd>The URL used to access the API.</dd>
</dl>

Quando o cabeçalho introduz toda a lista, colocá-lo antes do dl é a solução mais limpa.

✅ Válido: cabeçalho dentro de um elemento dd

<dl>
  <dt>API Reference</dt>
  <dd>
    <h2>Overview</h2>
    <p>Documentation for the public API.</p>
  </dd>
</dl>

O elemento dd aceita conteúdo de fluxo, por isso os cabeçalhos são permitidos lá.

✅ Válido: estilizar o dt para parecer um cabeçalho

<style>
  .term-heading {
    font-size: 1.5em;
    font-weight: bold;
  }
</style>

<dl>
  <dt class="term-heading">API Reference</dt>
  <dd>Documentation for the public API.</dd>
</dl>

Esta abordagem dá-lhe a aparência visual de um cabeçalho mantendo a marcação válida. Tenha em mente que elementos dt estilizados não aparecerão na estrutura de cabeçalhos do documento, por isso só use isto quando um cabeçalho verdadeiro não for semanticamente necessário.

✅ Válido: usar um span para estilização inline dentro de dt

<dl>
  <dt><span class="term-heading">API Reference</span></dt>
  <dd>Documentation for the public API.</dd>
</dl>

Uma vez que span é conteúdo de frase, é perfeitamente válido dentro de dt e dá-lhe um gancho de estilização sem quebrar o modelo de conteúdo.

Saiba mais:

MDN Reference

MDN Web Docs: <dt>: The Description Term element

→

MDN Reference

MDN Web Docs: The HTML Section Heading elements

→