Listas de definición

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

En el video anterior aprendimos a usar las listas ordenadas y las listas desordenadas
Ahora aprenderemos a usar las listas para definiciones
Las listas para definiciones, son representadas por la etiqueta dl
Vamos a ver la forma de empleo de esta etiqueta
Añadimos la etiqueta dl y la cerramos
Y al igual que con las etiquetas ul y ol, esta etiqueta necesita otras etiquetas para añadir elementos dentro de la lista
Ya que no podemos añadir los elementos directamente a la etiqueta
En el caso de la etiqueta dl necesitaremos dos etiquetas más para añadir elementos a la lista, en lugar de solo uno elemento con en el caso de las listas ordenadas y desordenadas donde usábamos solo la etiqueta li
Primero usamos la etiqueta dt que viene de definition title o título a definir, podemos pensar en esta etiqueta como en categorías
Las etiquetas dt siempre deben ir dentro de etiquetas dl
Así que vamos a nuestra etiqueta dl e iniciaremos añadiendo la primera etiqueta dt
Para este ejemplo colocaremos mamíferos
Y crearemos otra etiqueta dt y en ella colocaremos insectos
Y si guardamos, vamos al navegador y refrescamos la página, podremos ver los elementos que hemos añadido a nuestra lista, mamíferos e insectos
Y estas en realidad son solo como categorías
Como puedes ver se parece un poco a las listas ordenadas y desordenadas, pero sin los números o las viñetas
Ahora necesitamos añadir el contenido de estas categorías, y lo haremos usando la etiqueta dd, que viene de description element, o elemento descriptivo
Esta etiqueta al igual que la anterior, siempre debe estar dentro de la etiqueta dl y siempre después de una etiqueta dt
Así que regresemos al editor y veamos como añadirlas
Después de nuestra primera etiqueta dt, colocaremos la etiqueta dd, vamos a hacerle un espacio y colocaremos la etiqueta dd
Dentro de esta etiqueta colocaremos en este caso, un mamífero, escribimos Elefante, luego colocaremos más
Para ello simplemente creamos otra etiqueta dd y añadimos otro, añadiremos León, y añadiremos un último mamífero, colocaremos delfín
Luego añadiremos los insectos
Al igual que con los mamíferos, colocaremos nuestra etiqueta dd después de la etiqueta dt
Por favor nota que las etiquetas dd no se encuentran dentro de las etiquetas dt, las dd son las definiciones para las dt, pero estás no se encuentran dentro de ellas
Vamos a colocar primero escarabajo, luego crearemos otra y colocaremos hormiga, crearemos una última y colocaremos abeja
Ahora, guardaremos el documento, regresamos al navegador y refrescamos la página
Al hacerlo podrás ver como ahora nuestro listado luce como dos listas anidadas, pero sin las viñetas o los números
Tenemos nuestras categorías o los títulos, que serían mamíferos e insectos, y luego tenemos los elementos que se encuentran bajo esas categorías
O las descripciones de estas categorías
Este tipo de listas no son tan comunes como las listas ordenadas y desordenadas
Pero si la lista que crearás tiene este patrón, será muy bueno que las uses.

2 Comments on “Listas de definición”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image