Elemento dl en HTML

Un elemento dl es una lista de descripción y este elemento contiene un conjunto de términos y su explicación. Este elemento se utiliza normalmente en diccionarios, glosarios o para mostrar metadatos (una lista de pares «clave-valor»).

Elemento dl

Clasificaciones de contenido	No hay.
Contenido permitido	Un grupo de uno o más elementos `<dt>` seguidos de uno o más elementos <dd>. El elemento puede usarse `<div>` en él.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte contenido normativo.
Interfaz DOMO	`HTMLDListElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Características

En este elemento se pueden utilizar propiedades globales.

Notas

No utilice este elemento (ni un elemento <ul>) para alinear algunos elementos de la página, aunque esto es aplicable, no se recomienda y perderá el significado de ese elemento.

Para cambiar la alineación del contenido de un elemento, <dl> use una propiedad margin CSS.

Ejemplos del uso

Un solo término y una explicación del mismo. A continuación, se muestra un ejemplo de una lista en la que se describe y explica un solo término:

< dl > 
  < dt > BigCode </ dt > 
  < dd >
    Aquí van valoraciones y definiciones de la etiqueta dt
  </ dd > 
  <! - Otras definiciones -> 
</ dl >

Varios términos y una sola explicación. Este es un ejemplo de una lista que describe varios términos y una sola explicación sobre ellos:

< dl > 
  < dt > BigCode </ dt > 
  < dt > Lenguaje HTML </ dt > 
  < dd >
   Aquí van valoraciones y definiciones de las etiquetas dt
  </ dd > 
  <! - Otras definiciones -> 
</ dl >

Un solo término y más de una explicación. A continuación, se muestra un ejemplo de una lista que describe un solo término y más de una explicación:

< dl > 
  < dt > Lenguaje HTML </ dt > 
  < dd >
   Aquí van valoraciones y definiciones de la etiqueta dt
  </ dd > 
  < dd >
   Aquí también van valoraciones y definiciones de la etiqueta dt
  </ dd > 
  <! - Otras definiciones -> 
</ dl >

Más de un término, y cada término tiene una explicación especial. A continuación, se muestra un ejemplo de una lista de descripciones con más de un término, y cada término tiene su propia explicación:

< dl > 
  < dt > Café </ dt > 
  < dd > Bebida caliente negra </ dd >
  
  < dt > Leche </ dt > 
  < dd > Bebida fría blanca </ dd >

  < dt > Anís </ dt > 
  < dd > Bebida verde caliente </ dd >
  
  <! - Otras definiciones -> 
</ dl >

A veces, puede beneficiarse de la definición de un terminador y su explicación, a través de CSS, por ejemplo:

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

Poner cada término y explicarlo dentro de un elemento <div>

En cuanto a este ejemplo, es de la lista de descripción anterior, pero con cada término y su explicación dentro de un elemento <div>:

< dl > 
  < div > 
    < dt > Café </ dt > 
    < dd > Bebida caliente negra </ dd > 
  </ div >
  
  < div > 
    < dt > Leche </ dt > 
    < dd > Bebida fría blanca </ dd > 
  </ div >

  < div > 
    < dt > Anís </ dt > 
    < dd > Bebida verde caliente </ dd > 
  </ div >
  
    <! - Otras definiciones -> 
</ dl >

Formato predeterminado

La mayoría de los navegadores muestran el elemento <dl> con la propiedad establecida display en block, los márgenes superior ( margin-top) e inferior ( margin-bottom) 1em, y los márgenes izquierdo ( margin-left) y derecho ( margin-right) para 0:

dl {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}