LISTAS EN HTML

Listas en HTML:

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.

Podemos distinguir tres tipos de listas HTML:

Listas desordenadas

Listas ordenadas

Listas de definición

Las veremos detenidamente una a una.

Listas desordenadas

Son delimitadas por las etiquetas UL y su cierre (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta LI (La LI tiene su cierre, aunque si no lo colocas el navegador al ver el siguiente LI interpretará que estás cerrando el anterior). La cosa queda así:

<p>Países del mundo</p>

<ul>

                <li>Argentina</li>

                <li>Perú</li>

                <li>Chile</li>

</ul>

El resultado:

Países del mundo

·         Argentina

·         Perú

·         Chile

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">

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

circle     -      disc      -      square

Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el último elemento colocaremos un círculo. Para ello vamos a colocar el atributo type en la etiqueta UL, con lo que afectará a todos los elementos de la lista.

<ul type="square">

<li>Elemento 1

<li>Elemento 2

<li>Elemento 3

<li type="circle">Elemento 4

</ul>

Que tiene como resultado:

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>Bariloche 

                    </ol> 

                    <li>Uruguay 

                    <ol> 

                        <li>Montevideo 

                        <li>Punta del Este 

                    </ol> 

</ul>

De esta forma creamos una lista como esta: