Curso HTML 7.3 Listas de definición (dl, dt, dd)

Introducción a las listas de definición

En HTML, la lista de definición constituye un bloque semántico diseñado para asociar términos (<dt>) con sus correspondientes descripciones (<dd>). Se envuelve todo el conjunto con la etiqueta <dl> (Definition List). Estas listas son ideales para glosarios, preguntas frecuentes, pares clave-valor y cualquier contenido donde deban presentarse términos junto a sus explicaciones.

Estructura básica de <dl>, <dt> y <dd>

La sintaxis mínima consta de:

<dl>: Contenedor de la lista de definición.
<dt>: Define el término o nombre.
<dd>: Proporciona la descripción o definición para el término anterior.

Ejemplo básico:

<dl>
  <dt>>HTML</dt>
  <dd>>Lenguaje de marcado para estructurar páginas web.</dd>
  <dt>>CSS</dt>
  <dd>>Lenguaje de estilos para definir la presentación visual.</dd>
</dl>

Uso semántico y accesibilidad

Semántica: Aporta significado al documento. Un lector de pantalla anuncia “lista de definiciones” y luego enuncia cada término y su descripción.
Accesibilidad: Al usar correctamente <dt> y <dd>, se facilita la navegación por términos y definiciones.
SEO: Motores de búsqueda interpretan la relación terme–definición, mejorando la comprensión del contenido.

Atributos y consideraciones

Etiqueta	Atributos comunes	Descripción
<dl>	none	Contenedor genérico; no posee atributos globales especiales adicionales.
<dt>	globales (id, class, title)	Identifica el término, puedes enlazar desde otras partes del documento con `#id`.
<dd>	globales (id, class, title)	Explica el término; puede agruparse con varios párrafos o listas internas.

Listas de definición anidadas

Puedes encadenar listas de definición dentro de una descripción para subgrupos:

<dl>
  <dt>>Frutas</dt>
  <dd>
    <p>Tipos de frutas comunes:</p>
    <dl>
      <dt>>Manzana</dt>
      <dd>>Color rojo o verde, sabor dulce.</dd>
      <dt>>Plátano</dt>
      <dd>>Color amarillo, textura suave.</dd>
    </dl>
  </dd>
</dl>

Así logras jerarquías claras con subtérminos agrupados bajo una misma categoría.

Ejemplos prácticos

Glosario técnico

<dl>
  <dt id='api'>>API</dt>
  <dd>Interfaz de programación que permite la comunicación entre dos aplicaciones.</dd>

  <dt id='json'>>JSON</dt>
  <dd>Formato de texto ligero para el intercambio de datos.</dd>
</dl>

Preguntas frecuentes (FAQ)

<dl>
  <dt>¿Cómo me registro?</dt>
  <dd>Pulsa el botón “Registro” y completa el formulario con tus datos.</dd>

  <dt>¿Puedo recuperar mi contraseña?</dt>
  <dd>Sí, haz clic en “Olvidé mi contraseña” y sigue las instrucciones.</dd>
</dl>

Buenas prácticas y errores comunes

No mezclar <dt> y <dd> en otro orden: siempre va término (dt) seguido de su descripción (dd).
Evitar usar <p> fuera de <dd> para no romper la semántica.
Para múltiples descripciones del mismo término, puedes repetir <dd> tras un solo <dt>.
No usar listas de definición para listados simples sin definición, donde debería usarse <ul> o <ol>.

Compatibilidad y renderizado

Todos los navegadores modernos representan <dl> con un margen izquierdo sobre el bloque de <dd>. Aunque el estilo por defecto varía, la semántica permanece intacta. Evita drops de soporte, pues es una especificación muy estable desde HTML 4.

Con estos detalles, la lista de definición se convertirá en una herramienta poderosa para estructurar contenido semántico y accesible en tus páginas HTML.