Este artículo explica el uso de los elementos HTML dl, dt y dd mediante ejemplos prácticos en CSS.
¿Qué son dl, dt y dd?
dl, dt y dd son etiquetas HTML que trabajan juntas para crear listas de definiciones. Su estructura obligatoria es: <dl><dt></dt><dd></dd></dl>. A menudo se comparan con las tablas (table) por su capacidad de organizar información en pares término-descripción.
- dl: Lista de definiciones (Definition List).
- dt: Término a definir (Definition Term).
- dd: Descripción del término (Definition Description).
Sin estilos CSS personalizados, el dd se muestra con sangría izqiuerda por defecto.
Ejemplo 1: Visualización predeterminada
El siguiente código muestra el comportamiento nativo del navegador.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo básico</title>
</head>
<body>
<div class="envoltura">
<dl>
<dt>Encabezado A</dt>
<dd>Elemento 1</dd>
</dl>
<dl>
<dt>Encabezado B</dt>
<dd>Elemento 2</dd>
<dt>Encabezado C</dt>
<dd>Elemento 3</dd>
<dd>Elemento 4</dd>
</dl>
</div>
</body>
</html>
Resultado: Las descripciones (dd) se alinean verticalmente con el finnal del último dt de su grupo.
Ejemplo 2: Alinear dd a la izquierda
Para eliminar la sangría predeterminada del dd, se debe establecer su margen izquierdo a cero.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Alineación izquierda</title>
<style>
dd {
margin-left: 0;
}
</style>
</head>
<body>
<div class="envoltura">
<dl>
<dt>Título 1</dt>
<dd>Descripción 1</dd>
</dl>
<dl>
<dt>Título 2</dt>
<dd>Descripción 2</dd>
<dt>Título 3</dt>
<dd>Descripción 3</dd>
<dd>Descripción 4</dd>
</dl>
</div>
</body>
</html>
Resultado: Todos los dd aparecen sin sangría, alineados con el inicio del dt.
Ejemplo 3: Centrado horizontal y disposición en fila
Se puede lograr que los elementos dl se muestren centrados y en horizontal utilizando Flexbox y text-align.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Centrado y en fila</title>
<style>
.envoltura {
display: flex;
}
dl {
margin: 10px;
text-align: center;
border: 2px solid #1e17ff;
}
dd {
margin-left: 0;
}
</style>
</head>
<body>
<div class="envoltura">
<dl>
<dt>Encabezado Principal</dt>
<dd>Elemento A</dd>
</dl>
<dl>
<dt>Título Secundario</dt>
<dd>Elemento B</dd>
<dt>Otro Título</dt>
<dd>Elemento C</dd>
<dd>Elemento D</dd>
</dl>
</div>
</body>
</html>
Resultado: Los bloques dl se distribuyen horizontalmente y el texto dentro de cada bloque queda centrado.