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.

Para realizar una lista de definición, la etiqueta principal es <dl> y </dl> (definition list). La etiquetas del elemento y su definición son <dt> (definition term) y <dd> (definition definition) respectivamente.

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

<p>Diccionario de la Real Academia</p>
<dl>
<dt>Brújula
<dd>Instrumento para orientarse
<dt>Oreja
<dd>Sesenta minutejos
</dl>

El efecto producido:

Diccionario de la Real Academia

Brújula 
Instrumento para orientarse
Oreja 
Sesenta minutejos 

Nos fijamos en que cada línea <dd> está desplazada hacia la derecha. Este tipo de etiquetas son usadas a menudo con el propósito de crear textos más o menos desplazados hacia la derecha.

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:

Primer nivel de desplazamiento 

Segundo nivel de desplazamiento 

Tercer nivel de desplazamiento 

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:

Ciudades del mundo

  • Argentina
    1. Buenos Aires
    2. Bariloche
  • Uruguay
    1. Montevideo
    2. Punta del Este