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).

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 None, both the starting and ending tag are mandatory.
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

<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

<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

<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.

<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:

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.

<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

Compatibilidad Web

BCD tables only load in the browser

See also