• 1. Introducción
• 2. Listas ordenadas y númeradas
  • 2.1. Diferentes tipos de listas ordenadas
• 3. Listas desordenadas
  • 3.1. Diferentes tipos de listas desordenadas
• 4. Listas de definiciones
• 5. Listas compuestas mediante anidamiento

1. Introducción

Las listas ofrecen la posibilidad de presentar cierto tipo de información de una manera útil y simple. No sólo para ordenarla, sino también entre otras cosas para jerarquizarla, o numerarla. Para estos usos, XHTML nos permite construir diferentes tipos de listas, ya sea simples, o bien compuestas utilizando anidamiento de etiquetas.

Por ofrecer un ejemplo inmediato, resaltamos que los índices mismos de este manual utilizan listas para mostrarse.

2. Listas ordenadas y númeradas

Al utilizar este tipo listas, los agentes de usuario se encargarán de agregar una numeración a cada item que por defecto suele ser decimal, creciente y empezando en 1.

Veamos el siguiente código:

<ol>
<li>Correr el script llamado "borrar_casi_todo_usr_bin.sh"</li>
<li>Correr el comando, "apt-get install emacs21"</li>
<li>Correr el comando, "emacs".</li>
<li>Acostumbrarse al nuevo SO, luego conquistar el mundo.</li>
</ol>

Este código representa una lista ordenada númericamente, con instrucciones potenciales para conquistar el mundo.

Veamos cómo queda formateada:

1. Correr el script llamado "borrar_casi_todo_usr_bin.sh"
2. Correr el comando, "apt-get install emacs21"
3. Correr el comando, "emacs".
4. Acostumbrarse al nuevo SO, luego conquistar el mundo.

El elemento ol contiene los ítems de la lista que a su vez están contenidos por el elemento li. A cada ítem introducido se le asignará un número empezando por 1.

2.1. Diferentes tipos de listas ordenadas

Podemos utilizar el atributo type para cambiar el sistema de numeración de las listas ordenadas. Los valores soportados por type son: A, a, 1 (por defecto) y I. Sin embargo el cambio de estas propiedades son parte del diseño por lo que no sería correcto su uso en un documento estrícto. Más adelante veremos que con el uso de hojas de estilo CSS, podremos usar aún más tipos, y manteniendo la correcta separación del contenido y el diseño del documento.

Por el momento pueden ver: ejemplos del uso del atríbuto type en otra página.

3. Listas desordenadas

Si cambiamos el elemento ol por el elemento ul, obtendremos un efecto parecido, sólo que ésta vez las listas no se presentarán con ningún tipo de ordenamiento o numeración, sino con un viñetado.

Por ejemplo observemos este código:

<ul>
<li><a href="http://www.frba.utn.edu.ar">Universidad Tecnológica de Buenos Aires</a></li>
<a><a href="http://www.uba.ar">Universidad de Buenos Aires</a></li>
<li><a href="http://www.itba.edu.ar">Instituto tecnológico de buenos aires</a></li>
</ul>

Que va a quedar representado así:

• Universidad Tecnológica de Buenos Aires
• Universidad de Buenos Aires
• Instituto tecnológico de buenos aires

Cómo ven tenemos una lista construida con ul y dónde además cada uno de sus ítems tiene anidado un enlace. No hay ningún tipo de numeración y aunque el orden en como fueron introducidos los ítems se mantiene, no tiene ninguna importancia (recordemos que no hablamos de representación sino de valor semántico, si el orden importara deberíamos usar ol).

3.1. Diferentes tipos de listas desordenadas

De nuevo debemos decir que específicar tipos de listas mediante el atributo type, no es recomendable. Por el momento veremos como hacerlo en otra página. Luego veremos de que manera es conveniente mediante la aplicación de hojas de estilo CSS.

Ver tipos de listas desordenadas mediante type en otra página.

4. Listas de definiciones

Con este tipo es posible construir listas de definiciones. Cada ítem de una lista de definición contiene dos secciones, la primera es el contenido (ej. una palabra, una imagen, etc) a definir, y la segunda la definición de la primera. Se construyen con el elemento dl.

Ejemplo de código:

<dl>
<dt>p</dt>
<dd>Elemento de bloque, para construir párrafos.</dd>
<dt>strong</dt>
<dd>Elemento de línea, para remarcar la importancia de un contenido.</dd>
<dt>em</dt>
<dd>Elemento de línea, para enfátizar parte del contenido.</dd>
</dl>

La cual se representará así:

p

Elemento de bloque, para construir párrafos.

strong

Elemento de línea, para remarcar la importancia de un contenido.

em

Elemento de línea, para enfátizar parte del contenido.

Cómo sospecharán, el elemento dt marca el término a defirnir, y el elemento dd, marca la definición del anterior.

Debido a que no llevan ni viñetado ni numeración las listas de definición no tienen diferentes tipos, aunque sí podremos modificar su apariencia con la aplicación de hojas de estilo.

5. Listas compuestas mediante anidamiento

Podemos anidar varias listas a otras y de diferentes tipos sin restricciones. La sintaxis es sencilla. Supongamos que tenemos una lista ordenada, si quisieramos anidarle otra lista desordenada, deberíamos crear un ítem en la más externa (la ordenada) que hará de título, pero antes de cerrar este ítem con la etiqueta </li> debemos poner el código de la lista ordenada.

Ejemplo de una lista ordenada con 3 items, el primero normal, el segundo con una lista de definición anidada, y el tercero con otra lista desordenada (que a su vez tiene otro grado de anidamiento). Lo dicho:

<ol>
  <li>Item normal (lista ordenada)</li>
  <li>Item titulo
   <dl>
    <dt>Definición1</dt>
     <dd>Me llaman la definición 1 :).</dd>
    <dt>Definición2</dt>
     <dd>Me llaman la definición 2 :).</dd>
    <dt>Definición3</dt>
     <dd>Me llaman la definición 3 :).</dd>
   </dl>
  </li>
  <li>Item título con lista anidada.
   <ul>
    <li>Primer item (lista desordenada) segundo grado de anidamiento.</li>
    <li>Segundo item (lista desordenada) segundo grado de anidamiento.</li>
    <li>Item título de segundo grado.
     <ul>
      <li>Primer item (lista ordenada) tercer grado de anidamiento.</li>
     </ul>
    </li>
   </ul>
  </li>
 </ol>

Y el resultado es:

1. Item normal (lista ordenada)
2. Item titulo

   Definición1

   Me llaman la definición 1 :).

   Definición2

   Me llaman la definición 2 :).

   Definición3

   Me llaman la definición 3 :).

3. Item título con lista anidada.
   • Primer item (lista desordenada) segundo grado de anidamiento.
   • Segundo item (lista desordenada) segundo grado de anidamiento.
   • Item título de segundo grado.
     • Primer item (lista ordenada) tercer grado de anidamiento.