Listas de definiciones en HTML

21/Dic/2013 HTML Deja un comentario

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.

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

  1. <dt>Termino 1</dt>
  2. <dd>Definición 1</dd>
  3. <dt>Término 2</dt>
  4. <dd>Definición 2</dd>
  5. ...
  6. <dt>Término N</dt>
  7. <dd>Definición N</dd>
  8. </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. 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:

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

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

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

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.

Vídeos sobre HTML


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*