Las listas son uno de las etiquetas más comunes que usamos en una página web. Cuando comenzamos a aprender este lenguaje, suele parecernos que son algo "poco interesante" y a decir verdad, durante mucho tiempo fue así porque ¿para qué puede servir una lista si no es para hacer listas?
En los últimos tiempos, vaya uno a saber por qué, las listas comenzaron a tener un papel importante; alguien las sacó del olvido y se han transformado en las nuevas estrellas de las web. Blogger las usa para muchas cosas, desde lo "normal" como los archivos hasta lo insólito como los perfiles; en WordPress es aún peor, casi todo es una lista, hay un abuso de esas etiquetas y eso causa problemas a la hora de usarlas porque es un elemento que tienen una serie de propiedades especiales y porque los navegadores suelen interpretarlas de manera diferente.
Hay tres tipos de listas:
| <UL> </UL> crea una lista desordenada (sin numeración). |
| | <ul type="disc|square|circle">
<li> ....... </li>
</ul> |
El atributo type define el gráfico que se muestra y por defecto es un bullet pero los navegadores los muestran de formas diferentes o simplemente ignoran ciertos tipos.
Por defecto, la etiqueta UL tiene las siguientes propiedades CSS:
display: block;
font-family: Times New Roman;
font-size: 12pt; /* lo que equivale a 16px */
/* se separa de arriba y de abajo el equivalente a la altura de la fuente */
margin: 1em 0;
/* se separa de la izquierda el equivalente a dos veces y media el ancho de la fuente */
/* esto lo hace para dejar espacio para colocar el gráfico indicado en type */
padding: 0 0 0 2.5em;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
| <OL> </OL> crea una lista ordenada (numerada) |
- item 1
- item 2
- item 3
| - item 1
- item 2
- item 3
- item 4
| <ol type="1|a|A|i|I" start="n">
<li> ....... </li>
</ol> |
El atributo type define el tipo de numeración y también depende de los navegadores:
1 muestra números(1, 2, 3, 4, ...)
a letras en minúscula (a, b, c, d, ...)
A letras en mayúscula (A, B, C, D, ...)
i números romanos en minúscula (i, ii, iii, iv, ...)
I números romanos en mayúscula (I, II, III, IV, ...)
El atributo start indica el inico del contador de la lista.
Por defecto, la etiqueta OL tiene las mismas propiedades que la etiqueta UL excepto su tipo:
list-style-type: decimal;
En ambos casos, tanto en lista ordenadas como desordenadas,
la regla indica que su contenido sólo deben ser etiquetas
<LI> </LI>Los atributos que pueden usarse son los mismo:
<li type="disc|square|circle"> </Ii>
<li type="1|a|A|i|I" start="n"> </li>
Tienen una particularidad; no hace falta que estén dentro de listas; podemos utilizarlos de manera independiente en cualquier parte aunque, en este caso, el resultado podrá variar con los navegadores y, en algunos casos, esto es completamente ignorado.
Por defecto, la etiqueta LI tiene las siguientes propiedades:
margin: 0;
padding: 0;
display: list-item;
line-height: 1.25em;
height: 1.25em
width: 100%
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
| <DL> </DL> es la llamada Definition List. |
- ITEM 1
- DEFINICION 1
| - ITEM 1
- DEFINICION 1
- ITEM 2
- DEFINICION 2
| <dl>
<dt> ....... </dt>
<dd> ....... </dd>
</dl> |
En principio, fue creada para armar listas de definiciones. Cada item de este tipo de lista se coloca en una etiqueta DT (Definition Term) y su definición dentro de una etiqueta DD (Definition Definition) que va inmediatamente después de la anterior.
Por defecto, la etiqueta DL tiene las misma propiedades que UL pero padding es cero. Además, las propiedades de la lista (list-style-position, list-style-type y list-style-image) no se aplican.
Hay dos etiquetas más que crean listas pero, aunque siguen funcionando, ya no se utiliza:
<DIR> </DIR> y
<MENU> </MENU>. Ambas son iguales que
UL, no tienen atributos y sólo pueden contener etiquetas
LI. Ambas se consideran
depreciadas.
Otra etiqueta asociada a las listas y que tiene muy poco uso es la llamada
List Header:
<LH> </LH>Se utiliza para colocar el título de la lista y debe ser colocada inmediatamente después de
UL,
OL o
DL<ul>
<lh id="nombreUnico" class="nombre"> ....... </lh>
<li> ....... </li>
</ul>
