El elemento “h2” no debe aparecer como descendiente del elemento “dt”.

El elemento dt representa un término o nombre en una lista de descripción (dl). Según la especificación HTML, su modelo de contenido está restringido a contenido de frase, lo que significa que solo puede contener elementos de nivel de texto. Los elementos de encabezado (h1 a h6) son contenido de flujo, no contenido de frase, por lo que anidarlos dentro de un dt es HTML inválido.

Esta restricción existe porque dt está diseñado para etiquetar o nombrar algo, mientras que los encabezados definen el esquema estructural de un documento. Mezclar ambos crea semánticas conflictivas — los lectores de pantalla y otras tecnologías de asistencia pueden malinterpretar la jerarquía de encabezados del documento, llevando a una experiencia confusa para los usuarios que navegan por encabezados. Los navegadores también pueden manejar el anidado inválido de forma inconsistente, potencialmente rompiendo el diseño o la estructura lógica de la lista de descripción.

Este problema surge comúnmente cuando los desarrolladores quieren estilizar visualmente un término de definición como un encabezado. El enfoque correcto es reestructurar el marcado para que el encabezado se sitúe fuera del dt, o estilizar el dt directamente con CSS para lograr la apariencia visual deseada sin hacer mal uso de los elementos de encabezado.

Cómo solucionarlo

Tienes varias opciones:

1. Mueve el encabezado antes de la lista de descripción. Si el encabezado introduce un grupo de términos, colócalo encima del elemento dl.
2. Coloca el encabezado dentro de un elemento dd en su lugar. El elemento dd acepta contenido de flujo, por lo que los encabezados son válidos ahí.
3. Estiliza el dt con CSS. Si solo necesitas que el término se vea como un encabezado, aplica tamaño de fuente, peso y otros estilos directamente al dt sin envolver su contenido en un elemento de encabezado.

Ejemplos

❌ Inválido: encabezado dentro de un dt

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

El h2 es un descendiente de dt, lo cual viola el modelo de contenido.

✅ Válido: encabezado colocado antes de la lista de descripción

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

Cuando el encabezado introduce toda la lista, colocarlo antes del dl es la solución más limpia.

✅ Válido: encabezado dentro de un elemento dd

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

El elemento dd acepta contenido de flujo, por lo que los encabezados están permitidos ahí.

✅ Válido: estilizar el dt para que parezca un encabezado

<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>

Este enfoque te da la apariencia visual de un encabezado manteniendo el marcado válido. Ten en cuenta que los elementos dt estilizados no aparecerán en el esquema de encabezados del documento, así que usa esto solo cuando un encabezado verdadero no sea necesario semánticamente.

✅ Válido: usar un span para estilizado en línea dentro de dt

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

Como span es contenido de frase, es perfectamente válido dentro de dt y te da un punto de anclaje para estilos sin romper el modelo de contenido.

Más información:

MDN Reference

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

→

MDN Reference

MDN Web Docs: The HTML Section Heading elements

→