Listas XHTML

Listas ordenadas

Las listas ordenadas se crean con la etiqueta <ol> y muestran sus elementos numerados:

<p>Mis escritores favoritos (en orden de preferencia):</p>
<ol>
<li>R. A. Salvatore</li>
<li>George R. R. Martin</li>
<li>Isabel Allende</li>
</ol>

Tengamos presente que con CSS podremos modificar el número por el que empieza a contar, también elegir el tipo de numeración (números romanos, arábigos, letras, mayúsculas, etc…).

Listas sin ordenar

Este tipo de listas sin orden se crean con la etiqueta <ul> y marcan cada elemento con una viñeta:

<p>El helado perfecto (¡ñam!):</p>
<ul>
<li>1 bola de helado de chocolate</li>
<li>1 bola de helado de limón</li>
<li>Trocitos de piña y melocotón en almíbar</li>
<li>Sirope de chocolate</li>
</ul>

De la misma manera que con las listas ordenadas, es posible cambiar su aspecto con hojas de estilo y elegir la clase de viñetas e incluso cambiar las viñetas por una imagen.

Listas de definición

Estas listas son diferentes a las anteriores porque cada ítem se compone de dos elementos; un término y su definición. Las etiquetas que se utilizan son: <dl> para crear la lista, <dt> para cada término y <dd> para las definiciones.

Por ejemplo:

<p>Significado de algunos smileys:</p>
<dl>
<dt>:)</dt>
<dd>Sonrisa</dd>
<dt>xD</dt>
<dd>Carcajada</dd>
<dt>:P</dt>
<dd>Sacar la lengua</dd>
</dl>

Las palabras término y definición no sólo se refieren a una palabra y a su significado. También podemos usar una lista de definición para crear un perfil (por ejemplo), relacionando los pares Nombre-Leia, Ciudad-Coruscant y Profesión-Senadora.

También podemos cambiar su aspecto con CSS.

Listas anidadas

Anidar significa meter una lista dentro de otra. Las listas anidadas son sólo una combinación de las anteriores.

Por ejemplo:

<p>Algunos libros de Salvatore:</p>

   <ul>

      <li>I Trilogía de El Elfo Oscuro

         <ol>

            <li>La Morada</li>

            <li>El Exilio</li>

            <li>El Refugio</li>

         </ol>

      </li>

      <li>Trilogía de El Valle del Viento Helado

         <ol>

            <li>La Piedra de Cristal</li>

            <li>Ríos de Plata</li>

            <li>La Gema del Halfling</li>

         </ol>

      </li>

   </ul>

La precaución que debemos tener es cerrar la etiqueta que corresponda. Cerraremos primero las etiquetas interiores y luego las de afuera. Como se trata de insertar una lista dentro de un ítem de otra lista, debemos cerrar primero la lista interior y después el ítem de la lista exterior. Para esto no podemos ayudar visualmente con un buen tabulado.