Listas en HTML: listas de definición

Vemos las listas de definición y aprendemos a anidar listas para crear estructuras lista más complejas.

Terminamos el tema de listas en el manual de HTML de DesarrolloWeb.com estudiando las listas de definición. Veremos también la anidación de listas, que resultará un recurso interesante para estructurar datos un poco más complejos o enumerar elementos con una jerarquía.

Listas de definición

Las listas de definición sirven para hacer un conjunto de elementos con pares concepto-descripción. Es decir, se especificarán varios términos por su nombre y se escribirá una definición para cada uno. Cada elemento es presentado junto con su definición, uno detrás de otro.

Nota: Este tipo de listas la verdad es que no se usan mucho. Es un buen recurso, porque permite aplicar semántica a los items de una lista, que quedan asociados a su definición, por lo que usarlas no será una mala idea, sin embargo casi nadie las usa en la práctica.

Para realizar una lista de definición, ja etiqueta principal es DL y su cierre (definition list). La etiquetas del elemento y su definición son DT (definition term) y DD (definition definition) respectivamente.

Aquí os proponemos un código que podrá aclarar este sistema:

<p>Diccionario de la Real Academia</p> 
<dl> 
   	<dt>Brujula 
   	<dd>Señórula montada en una escóbula 
   	<dt>Oreja 
   	<dd>Sesenta minutejos 
</dl>

El efecto producido:

Fijaos en que cada línea DD está desplazada hacia la izquierda. Este tipo de etiquetas son usadas a menudo con el propósito de crear textos más o menos desplazados hacia la izquierda.

El código:

<dl> 
<dd>Primer nivel de desplazamiento 
   	<dl> 
      	<dd>Segundo nivel de desplazamiento 
      	<dl> 
         	<dd>Tercer nivel de desplazamiento 
      	</dl> 
   	</dl> 
</dl>

El resultado:

Anidando listas

Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto en otros casos. De esta forma, podemos conseguir listas mixtas como por ejemplo:

<p>Ciudades del mundo</p> 
<ul> 
   	<li>Argentina 
   	<ol> 
      	<li>Buenos Aires 
      	<li>Bariloche 
   	</ol> 
   	<li>Uruguay 
   	<ol> 
      	<li>Montevideo 
      	<li>Punta del Este 
   	</ol> 
</ul>

De esta forma creamos una lista como esta:

Referencia: Con esto hemos acabado el tema sobre Listas HTML, sin embargo, podemos completar las explicaciones en el Videotutorial de HTML, en el Vídeo sobre las Listas HTML.

Autor

Rubén Alvarez

Rubén es doctor en química y programador aficionado con experiencia en PHP.

Compartir

Comentarios

Néstor

30/11/2003
En el articulo donde aparece la definicion de listas de definicion, creo que en la explicacion despues del ejemplo donde explica el funcionamiento de
....dice que se desplaza a la izquierda, si no lo he entendido mal, su funcionamiento es hacia la derecha.

Jose Luba

06/12/2004
He visto el uso de las etiquetas <DL> y <DD>, para desplazar párrafos a la derecha. Pero también me gustaría saber cómo introducir párrafos con sangría francesa, es decir, cuando sólo se desplaza la primera línea de cada párrafo.

Luis

07/6/2006
He leido sobre las listas de definicion, mi pregunta es: ¿se puede hace que los despazamientos sean dentro de la misma linea?
gracias

RESPUESTA

Esta pregunta la tenemos respondida en algunos artículos de CSS que tenemos en el manual Taller de CSS.

David

13/5/2007
Esto de las tablas esta muy bien pero....
¿Hay alguna forma de que, empleando la ultima disposicion de tablas (<dl> y </dl>) no se produzca ningun salto de linea al principio?
Esque si por ejemplo quieres crear una tabla con el contenido dentro al poner <dl> y </dl> se produce un salto de linea al principio que no se puede quitar...
Gracias y esta web es genial, felicidades

jose

27/9/2008
el codigo que ustedes ponen asi:

<dl>
<dd>Primer nivel de desplazamiento
<dl>
<dd>Segundo nivel de desplazamiento
<dl>
<dd>Tercer nivel de desplazamiento
</dl>
</dl>
</dl>

no da lo mismo si es colocado asi:

<dl>
<dd>Primer nivel de desplazamiento
<dd>Segundo nivel de desplazamiento
<dd>Tercer nivel de desplazamiento
</dl>

yo lo probe y por lo menos ami me da lo mismo...
uso firefox...
gracias...

ToniPHP

09/4/2009
Faltaría por comentar que podemos hacer muchas cosas más con listas y CSS
Las listas son un elemento muy potente para la maquetación de páginas web, cuando las combinamos con CSS para aplicar estilos. Podemos obtener todo tipo de estructuras y efectos visuales con los estilos CSS, con muy poco código HTML.

juan carlos

24/8/2009
listas de definiciones
de que manera se pueden enumerar la dl o la dt.

Emily

24/9/2010
Listas
veo que cuando creaste lista por definicion, usaste <dl> y <dt>, no veo la diferencia cuando empleaste solo <ul>y <ol>, el texto se desplaza automaticamente sin haber usado <dl> ni <dd>, quiero que me expliquen porfavor.
gracias.

jmora99

27/2/2011
Nestor
tienes razón, dice "a la izquierda" y debe decir "a la derecha"

jmora99

27/2/2011
José
Yo estoy usando "google crome" y en este navegador no hay problemas, no ocurre lo que dices. Me parece que cada <dd> depende de la identación del <dl> anterior. Si no hay mas <dl>s identados (como en tu 2do caso), los <dd> saldrán todos al mismo nivel.

jmora99

27/2/2011
Juan Carlos: es mi mejor aproximación ...
<dl>
<ol type="a">
<dd><li>Primer nivel de desplazamiento
<dl>hola
<dd><li>Segundo nivel de desplazamiento
<dl> como
<dd><li>Tercer nivel de desplaazamiento
<dl> estas
</ol>
</dl>