Elemento dl en HTML

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 contenidoNo hay.
Contenido permitidoUn grupo de uno o más elementos <dt> seguidos de uno o más elementos <dd>. El elemento puede usarse <div> en él.
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte contenido normativo.
Interfaz DOMOHTMLDListElement

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
SoportadoSoportadoSoportadoSoportadoSoportado

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