Artículos
HTML

Listas de definiciones en HTML

21/Dic/2013

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.

Termino 1
Definición 1
Término 2
Definición 2
...
Término N
Definición N

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:

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.

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.

Código Fuente

Descárgate el código fuente de Listas de definiciones en HTML
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Test HTML
Suscribir
Notificar de
guest
0 Comentarios
Opiniones integradas
Ver todos los comentarios