La etiqueta HTML <dl>

Etiquetas HTML para crear listas de descripciones


De la misma forma que podemos crear listas genéricas con las etiquetas <ol> o <ul>, podemos crear listas de descripciones. La diferencia principal, es que este tipo de listas se suele utilizar cuando queremos asociar pares de nombre-valor, es decir, una lista de términos, donde cada término tiene una definición asociada.

Primero veamos las etiquetas que entran dentro de esta categoría:

Etiqueta Descripción
<dl> Define una lista de descripciones. Es la etiqueta contenedora.
<dt> Término de la descripción. Contiene el nombre o término a describir.
<dd> Descripción o valor asociado al término. Pueden existir varios por término.

Listas de descripción

Veamos un ejemplo práctico de como utilizar este tipo de listas:

<dl>
  <dt>Gallina</dt>
  <dd>Ave doméstica del orden de las galliformes.</dd>
  <dd>Cobarde, pusilánime.</dd>

  <dt>Gato</dt>
  <dd>Animal que en algún momento dominó Internet y en el futuro dominará el mundo.</dd>
</dl>

Observa que se trata de una lista de valores, pero no tiene porqué estar asociado a una sola definición. En el caso de la Gallina hay dos definiciones <dd> asociadas a la etiqueta del término <dt>. Sin embargo, en el segundo caso de la palabra Gato, hay sólo una definición.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev