<dl>, <dt>, <dd>

<dl> (description list), <dt> (description term) y <dd> (description details) son tres elementos que trabajan juntos para representar pares de término y descripción. Son la herramienta correcta cuando el contenido tiene la forma “concepto: explicación” o “clave: valor” — un glosario, una lista de preguntas frecuentes con sus respuestas, los metadatos de un artículo (autor: nombre, fecha: …, categoría: …), o las especificaciones de un producto.

La diferencia con <ul> u <ol> es estructural: en una lista de ítems, cada entrada es una unidad autónoma. En una lista de descripción, cada entrada es una relación entre dos roles distintos — el que nombra y el que explica. Esa relación es la que <dl>, <dt> y <dd> expresan semánticamente. Un lector de pantalla puede anunciar el término y luego la definición como unidades relacionadas, no como dos ítems sueltos.

La flexibilidad de <dl> supera a la de <ul>/<ol> en un punto: un solo <dt> puede tener varios <dd> (un término con múltiples definiciones o acepciones), y varios <dt> consecutivos pueden compartir un único <dd> (varios términos sinónimos con una sola descripción). Esa relación N:M entre términos y definiciones no tiene equivalente elegante en los otros tipos de lista.

Cómo funciona

<dl> es el contenedor de la lista completa. Dentro van directamente <dt> y <dd> (no <li>). El orden importa: un <dt> se asocia con los <dd> que lo siguen inmediatamente. El navegador, por defecto, indenta los <dd> respecto de los <dt>, pero ese estilo se puede cambiar con CSS.

La asociación término-descripción es semántica: el motor de búsqueda y el lector de pantalla interpretan la relación entre <dt> y <dd>. Eso es lo que diferencia un <dl> de dos listas separadas o de una tabla.

Modelo de contenido

• <dl>: solo acepta <dt> y <dd> como hijos directos (en HTML5 también pueden ir envueltos en <div> para agrupar pares, útil para CSS).
• <dt>: acepta contenido en línea (texto, <strong>, <em>, <abbr>, <a>). No acepta elementos de bloque ni <dd> dentro.
• <dd>: acepta contenido de flujo (texto, elementos en línea y de bloque, otras listas). Es el más flexible de los tres.

Display por defecto: <dl> es block; <dt> es block; <dd> es block con margen izquierdo por defecto del agente de usuario.

Sintaxis

<!-- Glosario básico -->
<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado para estructurar el contenido de una página.</dd>

  <dt>CSS</dt>
  <dd>Lenguaje de hojas de estilo para controlar la presentación visual.</dd>

  <dt>Navegador</dt>
  <dd>Programa que interpreta HTML y CSS y muestra páginas web.</dd>
</dl>

<!-- Un término con varias definiciones -->
<dl>
  <dt>Banco</dt>
  <dd>Asiento largo, generalmente sin respaldo.</dd>
  <dd>Entidad financiera que custodia depósitos y otorga préstamos.</dd>
</dl>

<!-- Varios términos que comparten la misma definición -->
<dl>
  <dt>color</dt>
  <dt>colour</dt>
  <dd>Propiedad CSS que define el color del texto y de los elementos de primer plano.</dd>
</dl>

<!-- Metadatos de un artículo -->
<dl>
  <dt>Autor</dt>
  <dd>Ada Lovelace</dd>

  <dt>Publicado</dt>
  <dd><time datetime="1843-08-10">10 de agosto de 1843</time></dd>

  <dt>Categoría</dt>
  <dd>Matemática computacional</dd>
</dl>

Atributos

<dl>, <dt> y <dd> no tienen atributos propios. Aceptan los atributos globales de HTML (class, id, lang, data-*).

Accesibilidad

El rol implícito de <dl> es term (para <dt>) y definition (para <dd>). Los lectores de pantalla modernos anuncian los pares término-definición con esos roles. Sin embargo, el soporte varía entre lectores: algunos anuncian el contexto de lista de descripción de forma distinta a <ul>/<ol>. Para interfaces complejas (como FAQs), puede valer la pena verificar con los principales lectores de pantalla.

Cuándo usar <dl> vs. alternativas

Notas, gotchas e interacción

• <dt> y <dd> fuera de <dl> son HTML inválido. No tienen semántica propia sin el contenedor.
• No usar <li> dentro de <dl>. Es el error más común al convertir una lista de ítems en lista de descripción.
• Varios <dd> para un <dt>. La especificación HTML lo permite explícitamente. Cada <dd> es una descripción o acepción adicional del término anterior.
• Agrupación con <div> dentro de <dl>. HTML5 permite envolver pares <dt>+<dd> en un <div> para facilitar el CSS (por ejemplo, mostrar pares en filas de una grilla). El <div> es solo un envoltorio de presentación; no cambia la semántica.

<!-- Agrupación con div para CSS (HTML5 válido) -->
<dl>
  <div>
    <dt>Autor</dt>
    <dd>Ada Lovelace</dd>
  </div>
  <div>
    <dt>Año</dt>
    <dd>1843</dd>
  </div>
</dl>

Vigente / legacy

<dl>, <dt> y <dd> están completamente vigentes. En HTML4, <dl> se llamaba “definition list” y se usaba exclusivamente para glosarios. HTML5 amplió el nombre a “description list” y el uso a cualquier par término-valor, lo que se refleja en los casos de uso actuales.