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 seguidos de uno o más elementos . El elemento puede usarse 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

Para cambiar la alineación del contenido de un elemento,

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  
  < dd >
    Aquí van valoraciones y definiciones de la etiqueta dt

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 > Lenguaje HTML  
  < dd >
   Aquí van valoraciones y definiciones de las etiquetas dt

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  
  < dd >
   Aquí van valoraciones y definiciones de la etiqueta dt
   
  < dd >
   Aquí también van valoraciones y definiciones de la etiqueta dt

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é  
  < dd > Bebida caliente negra 
  
  < dt > Leche  
  < dd > Bebida fría blanca 

  < dt > Anís  
  < dd > Bebida verde caliente

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

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

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

  < div > 
    < dt > Anís  
    < dd > Bebida verde caliente

Formato predeterminado

La mayoría de los navegadores muestran el elemento

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;
}