Listas de definición en HTML

Continuamos la serie de artículos dedicadas a las listas en HTML explicando el tercer tipo que aún nos resta: las listas de definición.

Este tipo de listas las utilizamos para dar el formato típico de un diccionario en el que se presenta un término y, a continuación su definición. Con un poco de imaginación, podréis encontrar, sin duda, otros usos creativos.

Pero antes que nada, observad previamente el aspecto que tienen.

En inglés, lista de definición se dice definition list. Con las iniciales, ya tenemos la etiqueta que caracteriza a este tipo de listas: <dl>.

A diferencia de las listas ordenadas y no ordenadas, en las que empleamos la etiqueta <li> para delimitar cada elemento (item), ahora necesitaremos dos, una para el término y otra para su descripción en sí.

Para el término de la definición usamos la etiqueta <dt>, de definition term.

Para la descripción de la definición disponemos de la etiqueta <dd>, de definition description.

Según esto, la lista de definición del ejemplo anterior no debe suponer ya ningún misterio:

<dl>
  <dt>Ordenadas</dt>
  <dd>Cada elemento va precedido por un número de orden</dd>
  <dt>No ordenadas</dt>
  <dd>Cada elemento se precede por un bolo común que no sugiere ninguna 
ordenación en particular</dd>
  <dt>De definición</dt>
  <dd>Dan formato a una definición de términos al estilo de un diccionario</dd>
</dl>

Recordad que la indentación no es obligatoria; se ha indentado con el único propósito de hacer más legible el código.

Para finalizar, hay algo más que debéis saber de las listas de definición: puede haber listas en las que algún elemento aparezca sin describir. En este caso habría un <dt>, pero no su correspondiente <dd>. Y a la inversa, puede haber términos con dos o más definiciones, es decir, con varios apartados <dd>.

En el próximo artículo aprederemos a anidar listas entre ellas. Entre tanto, practicad esto a vuestras anchas. Si no hacéis páginas web, tal vez escribáis en un blog. La mayoría de los sistemas de blog admiten la inserción de código HTML. Probad las listas, estructurad el texto.

Javier Montero


Listas de definición en HTML


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

6 opiniones en “Listas de definición en HTML”

  1. Hola, soy de chile y te doy muchas gracias por tu ayuda, con estos simples ejemplos puedes ayudar muchos a quienes recién comenzamos este mundo de la web, dejo saludos e infinitas gracias, chao

Responder a Victor Cancelar respuesta