Etiqueta HTML <dd>
La etiqueta HTML <dd> proporciona la descripción de un término en una lista de descripción, usada junto con las etiquetas <dl> y <dt>.
La etiqueta HTML <dd> (detalles de descripción) proporciona la descripción de un término en una lista de descripción. Solo funciona dentro de un <dl> (lista de descripción), emparejada con uno o más elementos <dt> (término de descripción) que nombran lo que se está describiendo.
La agrupación dentro de un <dl> es flexible — puedes tener:
- un término seguido de una descripción,
- un término seguido de varias descripciones,
- varios términos (sinónimos) seguidos de una descripción,
- varios términos seguidos de varias descripciones.
El elemento <dd> puede contener otro contenido: párrafos, listas, imágenes, enlaces, etc. Se coloca dentro de <body>, como hijo de <dl>. Por defecto, los navegadores aplican una sangría con margen izquierdo a <dd> para que la descripción aparezca visualmente debajo de su término.
Cuándo usar una lista de descripción
Usa <dl>/<dt>/<dd> para pares nombre-valor — contenido donde cada elemento es una etiqueta con su descripción asociada. Los casos de uso más adecuados incluyen:
- Glosarios — una palabra y su significado.
- Preguntas frecuentes — una pregunta (
<dt>) y su respuesta (<dd>). - Fichas de especificaciones de producto / metadatos — propiedades como "Peso", "Material", "SKU" y sus valores.
No recurras a una lista de descripción solo porque quieres sangría, o para una secuencia arbitraria de elementos sin etiqueta. Para pasos ordenados usa una lista ordenada (<ol>); para un conjunto simple de elementos usa una lista desordenada (<ul>). Elige una lista de descripción únicamente cuando cada entrada sea genuinamente un término emparejado con una descripción.
Sintaxis
La etiqueta <dd> se usa en pares. El contenido se escribe entre las etiquetas de apertura (<dd>) y cierre (</dd>), y debe estar dentro de un <dl> precedido por uno o más elementos <dt>.
Ejemplo: un glosario
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Coffee glossary</h1>
<dl>
<dt>Espresso</dt>
<dd>A concentrated coffee brewed by forcing hot water through finely-ground beans.</dd>
<dt>Latte</dt>
<dd>Espresso with a large amount of steamed milk and a light layer of foam.</dd>
<dt>Americano</dt>
<dd>Espresso diluted with hot water for a lighter, longer drink.</dd>
</dl>
</body>
</html>Ejemplo: una ficha de especificaciones de producto
Un mismo término también puede tener varias descripciones <dd>, y varios términos <dt> pueden compartir un <dd>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Backpack specifications</h2>
<dl>
<dt>Capacity</dt>
<dd>28 liters</dd>
<dt>Material</dt>
<dd>Recycled polyester</dd>
<dd>Water-resistant coating</dd>
<dt>Color</dt>
<dt>Colour</dt>
<dd>Charcoal grey</dd>
</dl>
</body>
</html>Accesibilidad
El elemento <dd> tiene un rol ARIA implícito de definition, y <dt> tiene el rol term. Las tecnologías de asistencia utilizan la estructura <dl> para anunciar cada descripción junto con el término al que pertenece, por lo que mantener el marcado semántico (en lugar de simular una lista con <div>s y CSS) hace que el contenido sea más fácil de navegar. No añadas un atributo role explícito — el rol implícito ya es correcto.
Atributos
La etiqueta <dd> no tiene atributos específicos del elemento. Solo admite los Atributos Globales y los Atributos de Evento.
Cómo dar estilo a la etiqueta HTML <dd>
Los navegadores aplican un margen izquierdo predeterminado (normalmente 40px) a <dd>. Puedes eliminarlo o reemplazarlo con CSS — por ejemplo, quitar la sangría y añadir tu propio relleno y estilo:
dd {
margin-left: 0; /* remove the default left indent */
padding-left: 1rem; /* add your own spacing instead */
color: #555;
}
dt {
font-weight: bold;
}