Completo tutorial de HTML - Listas III

Terminamos el tema de listas estudiando las listas de definición. Veremos
también la anidación de listas.

---

Listas de definición

---

Cada elemento es presentado junto con su 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í 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: 

---

Diccionario de la Real Academia


Brujula
Señórula montada en una escóbula
Oreja
Sesenta minutejos





Fijaos en que cada línea <dd> esta 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:

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. 1. Buenos Aires
      
   2. Bariloche
      

---

• Uruguay
  

1. 1. Montevideo
      
   2. Punta del Este
      

---