dl
==

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).

Pruébalo
--------

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-examplesy 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
 `<dt>` seguidos por uno o más elementos
 `<dd>`, opcionalmente intercalados con elementos
 `<script>` (en-US) y elementos
 `<template>`.O: Uno o más elementos
 `<div>`, opcionalmente entremezclados con
 elementos `<script>` (en-US) y elementos
 `<template>`.
  |
| 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` (en-US), `presentation` (en-US) |
| Interfaz DOM | `HTMLDListElement` (en-US) |

Atributos
---------

Los atributos de este elemento incluyen los atributos globales.

Ejemplos
--------

### Término sencillo y descripción


```html
<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:

![Image:HTML-dl1.png](/es/docs/Web/HTML/Element/dl/html-dl1.png)

### Múltiples términos, descripción sencilla


```html
<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:

![Image:HTML-dl2.png](/es/docs/Web/HTML/Element/dl/html-dl2.png)

### Término sencillo, múltiples descripciones


```html
<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:

![Image:HTML-dl3.png](/es/docs/Web/HTML/Element/dl/html-dl3.png)

### 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.


```html
<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:


```css
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.


```html
<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
----------------

| Specification |
| --- |
| HTML Standard # the-dl-element |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<dt>` element
* `<dd>` element