Etiqueta dl de HTML - Aprende HTML

La etiqueta HTML <dl> define una lista de descripción (anteriormente llamada lista de definición). Agrupa términos y sus descripciones como pares nombre–valor. El elemento <dl> es el contenedor; dentro de él, cada etiqueta <dt> especifica un término (el nombre), y cada etiqueta <dd> especifica la descripción de ese término (el valor).

Esta página explica cuándo usar <dl> en lugar de una lista no ordenada o una lista ordenada, cómo agrupar elementos para estilos y microdatos, cómo se comporta el marcado para la accesibilidad, y ejemplos ejecutables de los patrones más comunes.

Cuándo usar `<dl>`

Usa una lista de descripción cuando el contenido sea un conjunto de pares nombre–valor en lugar de una secuencia plana de elementos. Recurre a <dl> para:

Glosarios y diccionarios — un término seguido de su definición.
Preguntas frecuentes — cada pregunta es un <dt>, cada respuesta es un <dd>.
Metadatos — pares clave–valor como Autor, Publicación, Estado.
Diálogos o guiones — el hablante es el término, la línea hablada es la descripción.
Especificaciones de producto — Peso, Dimensiones, Material, cada uno con un valor.

Usa <ul> cuando los elementos no tengan un orden inherente ni un valor asociado, y <ol> cuando el orden o la numeración sean relevantes. La característica distintiva de <dl> es el emparejamiento de un nombre con uno o más valores.

No uses <dl> únicamente para sangrar texto. Tiene significado semántico, y usarlo para el diseño visual oculta ese significado. Para sangrar contenido visualmente, usa la propiedad CSS margin o padding.

Sintaxis

La etiqueta <dl> va en pares. Los términos y las descripciones se escriben entre las etiquetas de apertura (<dl>) y cierre (</dl>).

Ejemplo de la etiqueta HTML `<dl>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <dl>
      <dt>Hypertext</dt>
      <dd>A system of text pages that have cross-references.</dd>
      <dt>Hyperlink</dt>
      <dd>A part of a hypertext document that references another item.</dd>
    </dl>
  </body>
</html>

Pruébalo tú mismo »

Múltiples términos y descripciones

Un único <dt> puede tener varias descripciones <dd>, y varios términos <dt> pueden compartir una sola descripción <dd>. Esto permite modelar sinónimos, alternativas y definiciones agrupadas.

<dl>
  <!-- One term, multiple descriptions -->
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform web browser.</dd>
  <dd>Developed and maintained by the Mozilla Foundation.</dd>

  <!-- Multiple terms sharing one description -->
  <dt>JS</dt>
  <dt>JavaScript</dt>
  <dt>ECMAScript</dt>
  <dd>The programming language of the web.</dd>
</dl>

Agrupar pares con `<div>`

HTML5 permite envolver cada grupo nombre–valor en un <div> colocado directamente dentro del <dl>. Esto es un marcado válido y resulta útil cuando se desea:

aplicar CSS a un par completo de una vez (por ejemplo, con Flexbox o CSS Grid),
adjuntar microdatos o atributos globales como class o data-* a un grupo específico.

El <div> es el único elemento, aparte de <dt> y <dd>, permitido como hijo directo de <dl>.

<dl>
  <div class="row">
    <dt>Name</dt>
    <dd>Ada Lovelace</dd>
  </div>
  <div class="row">
    <dt>Field</dt>
    <dd>Mathematics</dd>
  </div>
  <div class="row">
    <dt>Known for</dt>
    <dd>The first published algorithm for a computer.</dd>
  </div>
</dl>

.row {
  display: flex;
  gap: 1rem;
}
.row dt {
  width: 8rem;
  font-weight: bold;
}

Accesibilidad

Una lista de descripción es una forma accesible de exponer relaciones clave–valor, pero solo cuando el marcado se usa de manera semántica.

Los elementos <dt> tienen un rol implícito term y los elementos <dd> un rol implícito definition, por lo que las tecnologías de asistencia entienden cuál elemento es el nombre y cuál es el valor.
Los lectores de pantalla suelen anunciar un recuento, como "lista de descripción, 3 términos", y luego leen cada término seguido de su descripción. El emparejamiento debe ser obvio por el texto en sí, así que escribe cada <dd> de modo que su relación con el <dt> precedente quede clara fuera de contexto.
El agrupamiento opcional con <div> no rompe esto. Los roles term y definition siguen aplicándose porque los elementos <dt> y <dd> permanecen como descendientes válidos del <dl>.

Atributos

La etiqueta <dl> admite los atributos globales y los atributos de evento.

Cómo dar estilo a la etiqueta HTML `<dl>`

De forma predeterminada, los navegadores sangran cada <dd> y apilan los términos y las descripciones verticalmente. Puedes restablecer y rediseñar su apariencia con CSS:

dl {
  margin: 0;
  padding: 0;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 20px;
}

Práctica

¿Cuáles afirmaciones sobre la etiqueta dl de HTML son correctas?

La etiqueta dl crea una lista de descripción de pares término–valor.La etiqueta dl se usa para crear una lista desplegable en HTML.La etiqueta dt especifica un término y la etiqueta dd especifica su descripción dentro de un dl.La etiqueta dl no puede combinarse con ninguna otra etiqueta.Un div puede agrupar un par dt y dd como hijo directo de dl en HTML5 válido.Un único dt solo puede tener exactamente un dd.

Cuándo usar <dl>