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).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
El contenido para este ejemplo interactivo se encuentra almacenado en un repositorio GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, por favor clona https://github.com/mdn/interactive-examples y envía la petición de extración (pull request).
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 |
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:
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:
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:
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.
Para cambiar la indentación de un término, usa la propiedad margin
de CSS.
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
BCD tables only load in the browser