Listas de definiciones en HTML

Quizás una de las listas más desconocidas son las listas de definiciones en HTML, ya que lo normal es maquetar mediante listas ordenadas o listas desordenadas. Las listas de definiciones en HTML nos permiten crear listas con pares de término/definición. Algo así como un glosario o diccionario.

Estructura del elemento DL

La estructura básica de las listas de definiciones en HTML se construye mediante el elemento DL.

<dl>
  <dt>Termino 1</dt>
  <dd>Definición 1</dd>
  <dt>Término 2</dt>
  <dd>Definición 2</dd>
  ...
  <dt>Término N</dt>
  <dd>Definición N</dd>
</dl>

Dentro de la estructura del elemento DL encontramos dos elementos, el primero es DT el cual alberga el término que vamos a explicar y DD dónde indicamos la definición de dicho término. Así que encontramos siempre estos dos pares de elementos DT y DD.

Ejemplo de diccionario

Para ver el funcionamiento de las listas de definiciones en HTML vamos a ver como crear un pequeño diccionario de palabras con su definición asociada. De esta manera el código que generamos para nuestra lista de definiciones será el siguiente:

<dl>
  <dt>Pizpireta</dt>
  <dd>Dicho de una mujer: Viva, pronta y aguda.</dd>
  <dt>Pulular</dt>
  <dd>Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.</dd>
  <dt>Concupiscencia</dt>
  <dd>En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres deshonestos.</dd>
</dl>

Este código para el manejo de listas de definiciones en HTML generará lo siguiente en pantalla:

Personalización con CSS

Mediante código CSS podemos modificar la visualización de las listas de definiciones en HTML si no nos convence la presentación por defecto del navegador.