Etiqueta dl en HTML: listas de términos y descripciones
Un glosario relaciona palabras con definiciones; una ficha de curso relaciona nombres como «Duración» o «Nivel» con sus valores. En HTML, <dl> representa esa clase de lista. Cada grupo reúne sus términos en <dt> y sus descripciones en <dd>.
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado para documentos web.</dd>
</dl>HTML es el término, marcado con <dt>; el texto siguiente es su descripción, marcada con <dd>. El navegador suele mostrar la descripción debajo y con sangría. Esa disposición se puede cambiar con CSS sin alterar la relación entre ambos.
Sintaxis y contexto válido
Escribe la apertura <dl> y el cierre </dl>: ninguna de las dos etiquetas se puede omitir. Puedes colocar esta lista donde se admita contenido de flujo, por ejemplo dentro de una sección, un artículo o un <div>. No la coloques dentro de un <p>, que no admite ese contenido.
Cada grupo contiene uno o más <dt> seguidos de uno o más <dd>. Un nuevo <dt> después de las descripciones inicia el siguiente grupo. No empieces con <dd> ni dejes un grupo de términos sin descripción. El HTML Living Standard define este modelo de <dl>.
Hay dos formas de organizar sus hijos:
- Grupos de
<dt>y<dd>directamente dentro de<dl>. - Uno o más
<div>hijos directos, cada uno con los términos primero y las descripciones después.
Elige una forma para toda la lista. No mezcles grupos envueltos en <div> con términos o descripciones sueltos bajo el mismo <dl>, ni añadas envoltorios intermedios como <section>. En ambos modelos pueden intercalarse elementos de soporte de scripts, como <script> y <template>; no hacen falta para una ficha estática.
Los ejemplos muestran todos los cierres de <dt> y <dd> para facilitar la lectura. HTML permite omitirlos en determinadas posiciones, según sus reglas propias; eso no permite omitir el cierre de <dl>.
Dl frente a ul, ol y table
¿Dl sirve solo para diccionarios? No. Una lista de definiciones es un uso de <dl>, pero su alcance es más amplio: también sirve para pares de nombre y valor y otras asociaciones.
- Usa
<dl>para datos de un curso: Duración → 12 horas, Nivel → Principiante. - Usa
<ul>para materiales sin relación nombre–valor: cuaderno, lápiz y computadora. - Usa
<ol>para una secuencia: inscribirse, acceder al aula y realizar la primera actividad. - Usa
<table>si comparas varios cursos con columnas de duración, nivel e idioma. Los cruces entre filas y columnas forman datos tabulares.
Dos columnas visuales no convierten automáticamente una ficha en tabla. Elige la estructura por las relaciones entre los datos y resuelve la disposición con CSS. Tampoco uses <dl> como herramienta para maquetar una página.
Ejemplo práctico: ficha de un curso
Guarda este documento como curso.html en UTF-8 y ábrelo en el navegador. Incluye todo lo necesario; no requiere servidor, recursos externos, CSS ni JavaScript.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Curso de HTML inicial</title>
</head>
<body>
<h1>Curso de HTML inicial</h1>
<dl>
<div>
<dt>Duración</dt>
<dd>12 horas</dd>
</div>
<div>
<dt>Nivel</dt>
<dd>Principiante</dd>
</div>
<div>
<dt>Idioma</dt>
<dd>Español</dd>
</div>
<div>
<dt>Instructora</dt>
<dt>Tutora</dt>
<dd>Lucía Moreno</dd>
</div>
<div>
<dt>Horario disponible</dt>
<dd>Turno matutino: de 9:00 a 11:00.</dd>
<dd>Turno vespertino: de 17:00 a 19:00.</dd>
</div>
</dl>
</body>
</html>- Lee los tres primeros grupos: cada nombre tiene su valor, en el orden duración, nivel e idioma.
- Observa los dos
<dt>consecutivos de Instructora y Tutora. Comparten el<dd>de Lucía Moreno: la misma persona desempeña ambos papeles. - ¿Puede haber varios
<dd>para un<dt>? Sí. Lee Horario disponible: sus dos<dd>expresan alternativas del mismo grupo, no horarios de dos cursos distintos. Para una descripción de varios párrafos, pon los párrafos dentro de un solo<dd>. - Reduce la ventana y comprueba que los nombres y valores mantengan su orden de lectura.
Cada <div> envuelve un grupo completo. Puedes retirar todos esos envoltorios y mantener los <dt> y <dd> como hijos directos de <dl>: la asociación se conserva. Para probar el ejemplo mínimo, sustituye la lista completa de este documento por el primer bloque de HTML.
Los <div> agrupan entradas dentro de la lista; no reemplazan al <dl> exterior. Sin él, los términos y las descripciones quedarían fuera de su contexto válido.
Atributos y accesibilidad
<dl> no tiene atributos específicos vigentes. Admite los atributos globales; en el documento de prueba, lang="es" en <html> declara el idioma y la lista lo hereda. El antiguo atributo compact es obsoleto: usa CSS para ajustar el espacio.
Mantén nombres claros y coloca los términos antes de sus descripciones. Así la ficha se entiende aunque no se presente en columnas. La navegación por listas descriptivas varía entre lectores de pantalla; MDN explica estas diferencias.
Errores frecuentes y etiquetas relacionadas
- Poner
<li>directamente en<dl>: pertenece a listas como<ul>u<ol>. Una lista interior de una descripción puede ir dentro de<dd>. - Alternar siempre un
<dt>y un<dd>como regla obligatoria: un grupo puede tener varios términos o varios valores, como muestra la ficha. - Separar términos y descripciones en distintos
<div>: cada envoltorio debe incluir un grupo completo. - Usar la sangría como único motivo para elegir
<dl>: aplica CSS al elemento que corresponda al contenido.
La guía de <dt> explica los nombres del grupo. La guía de <dd> explica cómo organizar sus descripciones. La de <div> desarrolla el contenedor genérico; dentro de <dl> se aplican las restricciones específicas descritas aquí. <table> representa relaciones tabulares, no sustituye cualquier lista de valores.
Compatibilidad y fuentes
Compatibilidad consultada el 4 de octubre de 2026: MDN clasifica <dl> como ampliamente disponible.
El HTML Living Standard fija el significado y el modelo de contenido; la referencia de MDN complementa la explicación, los ejemplos de agrupación y el soporte. La disponibilidad del elemento no garantiza un anuncio idéntico en todos los lectores de pantalla.