LISTAS EN HTML

Lista ordenada

Contenedor	Tipo de lista	Efecto visual
<ol> <li> ítem 1 </li> <li> ítem 2 </li> </ol>	Lista ordenada	ítem 1 ítem 2 ítem 3

Lista no ordenada

Contenedor	Tipo de lista	Efecto visual
<ul> <li> ítem 1 </li> <li> ítem 2 </li> </ul>	No ordenada	ítem 1 ítem 2 ítem 3

Lista de definiciones

Contenedor	Tipo de lista	Efecto visual
<dl> <dt>Término</dt> <dd>Definición</dd> </dl>	Definición	ítem 1 definición 1 ítem 2 definición 2

Atributos

Atributo	Valor	Efecto visual
COMPACT		estrecha el espacio entre líneas (listas más compactas)
PLAIN		elimina las viñetas
SEQNUM		Define el primer número
START		Define el primer número
CONTINUE		comienza en el número donde la lista se había detenido
TYPE (para listas ordenadas)	1 A A I I	Números arábigos (predeterminado) Letras mayúsculas Letras minúsculas Números romanos (I, II, III, IV ...) Números romanos en minúsculas
TYPE (para listas no ordenadas)	Circle Square Disc	Viñeta circular Viñeta cuadrada Viñeta sólida, redonda

Listas con viñetas desordenadas

He aquí el ejemplo más sencillo de una de estas listas:

escribimos en html	se verá como
<ul> <li>Primer término de la lista <li>Segundo término <li>Tercer término </ul>	Primer término de la lista Segundo término Tercer término

Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>. También podemos modificar las viñetas por medio del atributo TYPE= circle, disc o square (círculo, disco o cuadrado) y añadir sublistas.

escribimos en html	se verá como
<ul> <li type= disc>Primer término de la lista <ul> <li>Sublista <li>Otro elemento </ul> <li type=circle>Segundo término <li type=square>Tercer término </ul>	Primer término de la lista Sublista Otro elemento Segundo término Tercer término

Otro atributo interesante es compact para reducir el espacio entre los elementos

Listas con viñetas ordenadas

Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente

escribimos en html	se verá como
<ol type=i> <li >Primer término de la lista <li >Segundo término <li>Tercer término <li>Cuarto <li>Quinto </ol>	Primer término de la lista Segundo término Tercer término Cuarto Quinto

Listas de definición

Estas listas se forman con el elemento que se define y su definición. Las etiquetas son <DL> y </DL> para la lista y <dt> y <dd> para los elementos y sus definiciones. Un ejemplo:

escribimos en html	se verá como
<dl> <dt >Término 1º <dd>Definición del elemento 1º <dt>Término 2º <dd>Definición del elemento 2º <dt>Término 3º <dd>Definición del elemento 3º </dl>	Término 1º Definición del elemento 1º Término 2º Definición del elemento 2º Término 3º Definición del elemento 3º