
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; }
- Elemento summary en HTML
- Elemento details en HTML
- Elemento meter en HTML
- Elemento legend en HTML
- Elemento textarea en HTML
- Elemento select en HTML
- Elemento progress en HTML
- Elemento output en HTML
- Elemento option en HTML
- Elemento optgroup en HTML
- Elemento track en HTML
- Elemento label en HTML
- Elemento input en HTML
- Elemento form en HTML
- Elemento fieldset en HTML
- Elemento datalist en HTML
- Elemento button en HTML
- Elemento tr en HTML
- Elemento thead en HTML
- Elemento th en HTML
- Elemento tbody en HTML
- Elemento tfoot en HTML
- Elemento table en HTML
- Elemento td en HTML
- Elemento colgroup en HTML
- Elemento col en HTML
- Elemento caption en HTML
- Elemento del en HTML
- Elemento script en HTML
- Elemento noscript en HTML
- Elemento canvas en HTML
- Elemento picture en HTML
- Elemento ins en HTML
- Elemento video en HTML
- Elemento source en HTML
- Elemento param en HTML
- Elemento object en HTML
- Elemento embed en HTML
- Elemento map en HTML
- Elemento img en HTML
- Elemento audio en HTML
- Elemento area en HTML