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.

To change the indentation of a description term, use the CSS margin property.

Especificaciones

Especificación Estatus Comentarios
HTML Living Standard
La definición de '<dl>' en esta especificación.
Living Standard  
HTML5
La definición de '<dl>' en esta especificación.
Recommendation  
HTML 4.01 Specification
La definición de '<dl>' en esta especificación.
Recommendation Definición inicial

Compatibilidad Web

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
dlChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo 1IE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo

See also

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, IsraelFloresDGA, jigs12, johnmejia, teoli, Jorolo
Última actualización por: mdnwebdocs-bot,