Html: Listas

¿Qué son las listas de HTML?

Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura. Las listas originalmente están pensadas para citar, numerar y definir cosas a través de características, o al menos así lo hacemos en la escritura de textos. Sin embargo, las listas finalmente se utilizan para mucho más que enumerar una serie de puntos, en realidad son un recurso muy interesante para poder maquetar elementos diversos, como barras de navegación, pestañas etc. Pero esto lo veremos cuando apliquemos estilos CSS a las listas.

Tenemos tres tipos de listas:

• Ordenadas.
• Desordenadas.
• De definición.

Listas Ordenadas

Las listas ordenadas sirven también para presentar información, en diversos elementos o items, con la particularidad que éstos estarán predecidos de un número o una letra para enumerarlos, siempre por un orden.

Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la misma, utilizamos la etiqueta <li>.

Ejemplo código:

<ol>
<li>Naranjas</li>
<li>Manzanas</li>
<li>Bananas</li>
</ol>

Resultado:

1. Naranjas
2. Manzanas
3. Bananas

Dentro de cada Item se pueden agregar imágenes, párrafos, otras listas, etc.

Puede que en algún caso deseemos comenzar nuestra enumeración por un número o letra que no tiene por qué ser necesariamente el primero de todos. Para solventar esta situación, podemos utilizar un segundo atributo, start, que tendra como valor un número. Este número, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o los números romanos, el navegador se encarga de hacer la traducción del número a la letra correspondiente. Veamos el siguiente ejemplo:

<p>Ordenamos por numeros</p>
 <ol type="1">
 <li>Elemento 1</li>
 <li> Elemento 2</li>
 </ol>

 <p>Ordenamos por letras</p>
 <ol type="a" class="lista">
 <li>Elemento a</li>
 <li> Elemento b</li>
 </ol>

<p>Ordenamos por números romanos empezando por el 10</p>

<ol type="i" start="10">
 <li>Elemento x</li>
 <li> Elemento xi</li>
 </ol>

El resultado:

Ordenamos por numeros

1. Elemento 1
2. Elemento 2

Ordenamos por letras

1. Elemento a
2. Elemento b

Ordenamos por números romanos empezando por el 10

1. Elemento x
2. Elemento xi

Listas Desordenadas

Exponen la lista anteponiendo un punto, cuadrado o triángulo negro.

Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma utilizamos la etiqueta <li>.

Ejemplo código:

<ul>
<li>Tomates</li>
<li>Pepinos</li>
<li>Cebollas</li>
</ul>

Resultado:

• Tomates
• Pepinos
• Cebollas

Dentro de cada Item se pueden agregar imágenes, párrafos, otras listas, etc.

Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura <ul>, si queremos que el estilo sea válido para toda la lista, o dentro le la etiqueta <li> si queremos hacerlo específico de un solo elemento. La sintaxis es del siguiente tipo:

<ul type="tipo de viñeta"></ul>

donde tipo de viñeta puede ser uno de los siguientes:

circle
disc
square

Veamos un ejemplo más:

<ul>
 <li type="disc">Elemento 1</li>
 <li type="square">Elemento 2</li>
 <li>Elemento 3</li>
 <li type="circle">Elemento 4</li>
 </ul>

Resultado:

• Elemento 1
• Elemento 2
• Elemento 3
• Elemento 4

En algunos navegadores no funciona correctamente el cambio de viñeta, como ocurre en este caso con Firefox por ejemplo

Listas de definición

Se utilizan para definir términos. 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.

Las listas de definición se representan con la etiqueta <dl>.

Los términos de las mismas con <dt>.

La definición de esos términos comienza con <dd>.

Ejemplo código:

<dl>
<dt>Chocolate</dt>
<dd>Elaborado a base de cacao</dd>
<dt>Caramelo</dt>
<dd>Elaborado a base de azucar</dd>
</dl>

Resultado:

Chocolate

Elaborado a base de cacao

Caramelo

Elaborado a base de azucar

Dentro de las etiquetas <dd> se pueden agregar imágenes, párrafos, otras listas, etc.

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>
          <li>Bariloche</li>
       </ol>
    </li>
    <li>Uruguay
       <ol>
          <li>Montevideo</li>
          <li>Punta del Este</li>
       </ol>
    </li>
 </ul>

Ciudades del mundo

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