El elemento “div” carece de una instancia requerida del elemento hijo “dd | dt”.

El elemento <dl> representa una lista de descripción: una colección de términos (<dt>) emparejados con sus descripciones (<dd>). Según la especificación HTML, el contenido permitido de un <dl> son grupos de elementos <dt> y <dd> directamente, o elementos <div> que envuelvan esos grupos. Esta opción de envolver con <div> existe específicamente para ayudar con el estilo, ya que te permite aplicar CSS a un par término-descripción como una unidad.

Sin embargo, estos elementos <div> envolventes no son contenedores de propósito general dentro de <dl>. La especificación requiere que cada <div> dentro de un <dl> contenga al menos un hijo <dt> o <dd>. Un <div> que está vacío, o que contiene otros elementos como <span>, <p>, u otro <div>, viola esta regla y produce un error de validación.

Esto es importante por varias razones. Los lectores de pantalla y las tecnologías de asistencia dependen de la estructura semántica de las listas de descripción para transmitir la relación entre términos y definiciones. Un <div> vacío o mal estructurado dentro de un <dl> rompe ese contrato semántico, potencialmente confundiendo tanto a la tecnología de asistencia como a los navegadores. Mantener tu marcado válido también asegura una representación consistente en todos los navegadores.

Cómo solucionarlo

1. Asegúrate de que cada <div> dentro de un <dl> contenga al menos un <dt> o <dd> — no dejes vacíos los elementos <div> envolventes.
2. No pongas contenido que no sea <dt>/<dd> directamente dentro de estos envoltorios <div> — elementos como <span>, <p>, o elementos <div> anidados deben colocarse dentro de un <dt> o <dd>, no como hermanos de estos.
3. Elimina los envoltorios <div> innecesarios — si un <div> dentro de un <dl> no sirve para estilo o agrupación, elimínalo por completo.

Ejemplos

❌ <div> vacío dentro de un <dl>

<dl>
  <div>
  </div>
  <div>
    <dt>HTML</dt>
    <dd>Un lenguaje de marcado para estructurar contenido web.</dd>
  </div>
</dl>

El primer <div> está vacío y no tiene ningún hijo <dt> o <dd>, lo que desencadena el error.

❌ <div> con solo hijos que no son <dt>/<dd>

<dl>
  <div>
    <p>Esta es una lista de descripción:</p>
  </div>
  <div>
    <dt>CSS</dt>
    <dd>Un lenguaje de hojas de estilo para describir la presentación.</dd>
  </div>
</dl>

El primer <div> contiene un elemento <p> pero ningún <dt> o <dd>, lo cual es inválido.

✅ Cada <div> contiene elementos <dt> y <dd>

<dl>
  <div>
    <dt>HTML</dt>
    <dd>Un lenguaje de marcado para estructurar contenido web.</dd>
  </div>
  <div>
    <dt>CSS</dt>
    <dd>Un lenguaje de hojas de estilo para describir la presentación.</dd>
  </div>
</dl>

✅ Usar <dl> sin envoltorios <div>

Si no necesitas elementos <div> para el estilo, puedes colocar <dt> y <dd> directamente dentro del <dl>:

<dl>
  <dt>HTML</dt>
  <dd>Un lenguaje de marcado para estructurar contenido web.</dd>
  <dt>CSS</dt>
  <dd>Un lenguaje de hojas de estilo para describir la presentación.</dd>
</dl>

✅ Un <dt> con múltiples descripciones <dd> en un <div>

Un solo término puede tener múltiples descripciones. El <div> es válido siempre que contenga al menos un <dt> o <dd>:

<dl>
  <div>
    <dt>JavaScript</dt>
    <dd>Un lenguaje de programación para la web.</dd>
    <dd>Soporta programación dirigida por eventos y funcional.</dd>
  </div>
</dl>

Más información:

WHATWG Spec

HTML Spec: the dl element

→