dl

El elemento HTML <dl> representa una lista descriptiva. El elemento encierra una lista de grupos de términos (especificados con el uso del elemento <dt>) y de descripciones (proveídas con elementos <dd>). Algunos usos comunes para este elemento son implementar un glosario o para desplegar metadatos (lista de pares llave-valor).

Pruébalo

El contenido para este ejemplo interactivo se encuentra almacenado en un repositorio GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, por favor clona https://github.com/mdn/interactive-examplesy envía la petición de extración (pull request).

Categorías de contenido	Contenido de flujo, y si los elementos hijos de `<dl>` incluyen un grupo nombre-valor, contenido palpable.
Contenido permitido	Ya sea: Cero o más grupos cada uno consistiendo en uno o más elementos `<dt>` seguidos por uno o más elementos `<dd>`, opcionalmente intercalados con elementos `<script>` y elementos `<template>`. O: Uno o más elementos `<div>`, opcionalmente entremezclados con elementos `<script>` y elementos `<template>`.
Omisión de Tag	Ninguna, tanto la etiqueta inicial como la final son obligatorias.
Padres permitidos	Cualquier elemento que acepte contenido de flujo.
Roles ARIA permitidos	`group`, `presentation`
Interfaz DOM	`HTMLDListElement`

Atributos

Los atributos de este elemento incluyen los atributos globales.

Ejemplos

Término sencillo y descripción

html

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

Salida:

Image:HTML-dl1.png

Múltiples términos, descripción sencilla

html

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

Salida:

Image:HTML-dl2.png

Término sencillo, múltiples descripciones

html

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
  </dd>

  <!-- Other terms and descriptions -->
</dl>

Output:

Image:HTML-dl3.png

Múltiples términos y descripciones

También es posible definir múltiples términos con múltiples descripciones correspondientes, combinando los ejemplos de arriba.

Metadatos

Las listas descriptivas son útiles para desplegar metadatos como una lista de pares llave-valor.

html

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

Tip: Puede ser útil definir un separador llave-valor en el CSS, como:

css

dt::after {
  content: ": ";
}

Encapsulado de grupos nombre-valor en elementos `<div>`

WHATWG HTML permite encapsular cada grupo nombre-valor de un elemento <dl> en un elemento <div>. Esto puede ser útil cuando se utilizan microdatos, o cuando atributos globales apliquen a todo el grupo, o por motivos de estilo.

html

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

Notas

No use este elemento (ni elementos <ul>) solo para crear sangría en una página. Si bien funciona, es una mala práctica y obscurece el signinifcado de las listas descriptivas.

Para cambiar la indentación de un término, usa la propiedad margin de CSS.

Especificaciones

Specification
HTML Standard # the-dl-element

Compatibilidad con navegadores

BCD tables only load in the browser