Listas de definición en HTML: <dl>, <dt> y <dd>
Una guía práctica, con ejemplos, comparativas y buenas prácticas para usar listas de definición de forma semántica, accesible y optimizada para SEO.
¿Qué es una lista de definición?
Una lista de definición (<dl>) representa pares de término (<dt>) y descripción (<dd>). Es ideal para glosarios, datos de configuración, especificaciones técnicas o cualquier relación clave‑valor.
<dl>: contenedor principal.<dt>: término o encabezado del concepto.<dd>: definición o descripción asociada.
Comparativa rápida con otras listas HTML
| Tipo de lista | Elemento | Uso típico | Semántica |
|---|---|---|---|
| Ordenada | <ol> |
Pasos secuenciales, rankings | Orden implícito |
| Desordenada | <ul> |
Listas de ítems sin orden | Sin orden, solo agrupación |
| Definición | <dl> |
Glosarios, pares clave‑valor | Relación término‑definición |
Ejemplo básico
<dl class="row">
<dt class="col-sm-3">HTML</dt>
<dd class="col-sm-9">Lenguaje de marcado para estructurar contenido web.</dd>
<dt class="col-sm-3">CSS</dt>
<dd class="col-sm-9">Hoja de estilos que controla la presentación visual.</dd>
<dt class="col-sm-3">JavaScript</dt>
<dd class="col-sm-9">Lenguaje de programación que permite interactividad en el navegador.</dd>
</dl>Usamos las utilidades de Bootstrap Grid (.row, .col‑sm‑3, .col‑sm‑9) para alinear los términos y sus descripciones en columnas responsivas.
Listas de definición anidadas
Se pueden anidar <dl> dentro de un <dd> para representar estructuras jerárquicas, como especificaciones técnicas de un producto.
<dl>
<dt>Laptop XYZ</dt>
<dd>
<dl>
<dt>Procesador</dt>
<dd>Intel Core i7‑11800H</dd>
<dt>Memoria RAM</dt>
<dd>16 GB DDR4</dd>
</dl>
</dd>
</dl>Accesibilidad (a11y)
- Los lectores de pantalla anuncian automáticamente
<dt>como "término" y<dd>como "definición". - Utiliza
aria-describedbycuando la relación no sea evidente, por ejemplo en listas complejas. - Evita mezclar
<dt>con contenido que no sea texto breve; si necesitas párrafos extensos, colócalos dentro de<dd>y agrega<p>normales.
SEO y estructuración de datos
Los motores de búsqueda interpretan <dl> como contenido semántico, lo que ayuda a:
- Resaltar fragmentos de respuesta (featured snippets) cuando el término es una pregunta frecuente.
- Mejorar la densidad de palabras clave sin sobre‑optimizar, pues el
<dt>actúa como encabezado implícito.
Para potenciar aún más el SEO, combina <dl> con marcado JSON‑LD de tipo FAQPage cuando la lista responde a preguntas de usuarios.
Buenas prácticas y optimización
- Usa clases de utilidad de Bootstrap (
.mb-3,.border) para espaciar y separar visualmente cada par. - Limita la profundidad de anidación a 2 niveles para evitar problemas de legibilidad y renderizado.
- Escapa caracteres HTML en los valores de definición para prevenir vulnerabilidades XSS.
- Valida tu HTML con W3C Validator para garantizar que
<dt>y<dd>están correctamente anidados dentro de<dl>.
Estilado avanzado con CSS
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>DL con Grid</title>
<style>
dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: .5rem 1rem;
}
dt {
font-weight: 600;
color: #2c3e50;
}
dd {
margin-left: 0;
color: #34495e;
}
</style>
</head>
<body>
<dl>
<dt>Nombre</dt>
<dd>Juan Pérez</dd>
<dt>Email</dt>
<dd>juan@email.com</dd>
<dt>Ciudad</dt>
<dd>Ciudad de México</dd>
</dl>
</body>
</html>
Este enfoque CSS Grid elimina la necesidad de clases de Bootstrap y ofrece un control fino del alineamiento.
Compatibilidad y rendimiento
Los elementos <dl>, <dt> y <dd> están soportados en todos los navegadores modernos (Chrome, Edge, Firefox, Safari) y en versiones de IE 11+. No generan sobrecarga de renderizado; su uso es tan ligero como cualquier otra etiqueta semántica.
Solución de problemas (troubleshooting)
- Definiciones no aparecen alineadas: verifica que no haya estilos heredados como
floatodisplay:inlineendt/dd. Restablece condisplay:blocko usa la rejilla CSS mostrada. - Lectores de pantalla leen todo como una lista sin distinción: asegúrate de que cada
dtesté seguido inmediatamente por sudd. No interrumpas la secuencia con elementos externos. - Problemas de SEO no detectados: revisa que el
dtcontenga la palabra clave objetivo y que laddproporcione contenido relevante y único.
36.Guía completa de listas de definición en HTML: <dl>, <dt> y <dd>