Listas

Introducción

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.


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 La etiqueta <UL> admite estos parámetros:

Parámetro Utilidad Resultado
COMPACT Indica al navegador que debe representar la lista de la manera más compacta posible
  • Primer elemento
  • Segundo elemento
TYPE=disc, circle o 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ín 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í.


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ámetro Utilidad Resultado
COMPACT Indica 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 o 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 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 Atributo de <LI>, actúa como START pero a partir de un elemento predeterminado.
  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento



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.

Lección Anterior HTML Lección Siguiente
Lección Anterior

Lección Siguiente