7. Listas

Existen varios tipos de listas en HTML. Todas ellas se pueden meter unas dentro de otras formando árboles muy bonitos y preciosos. Todos los tipos siguen el siguiente formato:

<tipo_lista>
  <LI>Primer elemento
  <LI>Segundo elemento
</tipo_lista>

tipo_lista puede ser una de las siguientes: DIR, DL, MENU, OL y UL.



7.1. Listas desordenadas

La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Cada elemento de la lista irá normalmente precedido por un círculo. Por ejemplo,

<UL>
  <LI>Primer elemento
  <LI>Segundo elemento
</UL>

se verá como

  • Primer elemento
  • Segundo elemento

La etiqueta <UL> admite estos parámetros:

ParámetroUtilidadResultado
COMPACTIndica al navegador que debe representar la lista de la manera más compacta posible.
  • Primer elemento
  • Segundo elemento
TYPE="disc", "circle", "square"Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>.
  • Tipo disc
  • Tipo circle
  • Tipo square

También son listas desordenadas aquellas que utilizan las etiquetas <DIR> y <MENU>. En principio tenían como propósito representar una lista estilo directorio (multicolumna) o tipo menú (una sola columna). En la práctica los navegadores lo han implementado como sinonimos de <UL>, por lo que no los estudiaremos aquí.



7.2. Listas ordenadas

La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a mayor. Normalmente cada elemento de la lista irá precedido por su número en el orden. Por ejemplo,

<OL>
  <LI>Primer elemento
  <LI>Segundo elemento
</OL>

se verá como

  1. Primer elemento
  2. Segundo elemento

La etiqueta <OL> admite estos parámetros:

ParámetroUtilidadResultado
COMPACTIndica al navegador que debe representar la lista de la manera más compacta posible.
  1. Primer elemento
  2. Segundo elemento
TYPE="1", "a", "A", "i", "I"Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>.
  1. Tipo 1
  2. Tipo a
  3. Tipo A
  4. Tipo i
  5. Tipo I
START="num"Indica al navegador el número por el que se empezará a contar los elementos de la lista.
  1. Primer elemento
  2. Segundo elemento
VALUE="num"Atributo de <LI>, actúa como START pero a partir de un elemento predeterminado.
  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento


7.3. Listas de definiciones

Este es el único tipo de lista que no utiliza la etiqueta <LI>. Al tener como objetivo presentar una lista de definiciones, de modo que tiene que representar de manera distinta el objeto definido y la definición. Esto se hace por medio de las etiquetas <DT> y <DD>:

<DL>
  <DT>Primer elemento<DD>Es un elemento muy bonito.
  <DT>Segundo elemento<DD>Este, en cambio, es peor.
</DL>

se verá como

Primer elemento
Es un elemento muy bonito.
Segundo elemento
Este, en cambio, es peor.

La etiqueta <DL> sólo admite como parámetro el ya conocido COMPACT, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores.

EnlacesImágenes