4.

Listas (I)
4.1 Listas no ordenadas.

Tipos de listas

El lenguaje HTML permite escribir listas que permiten describir o enumerar elementos. En
concreto podemos escribir tres tipos de listas:

 Listas no ordenadas: Los elementos de la lista no están ordenados y van

precedidos por una viñeta (como ésta lista que estás leyendo).

 Listas ordenadas: Los elementos de la lista van precedidos de una numeración,

bien sea con números o con letras.

 Listas de definición: Este tipo de listas funcionan como un diccionario: cada

elemento consta de dos partes: El término a definir, y su definición.

Listas no ordenadas: sintaxis

Las listas no ordenadas van definidas por viñetas. La lista entera va encerrada dentro de la
etiqueta <ul> ... </ul>; dentro de esta etiqueta van los términos de la lista, cada uno de
los cuales va delimitado por la etiqueta <li> ... </li>. Veamos un ejemplo:

Código HTML:

<p>paises del cono sur:</p>

<ul>
<li>Argentina</li>
<li>Chile</li>
<li>Paraguay</li>
<li>Uruguay</li>
</ul>

En el navegador, esta lista la veremos así:

Paises del cono sur

 Argentina

 Chile

 Paraguay

 Uruguay

El navegador muestra por defecto las listas no ordenadas con un pequeño círculo a la
derecha. Toda la lista está dentro de las etiquetas <ul> ... </ul>; y cada uno de sus
elementos está dentro de la etiqueta <li> ... </li>.

Estilo de listas no ordenadas

Podemos cambiar el estilo de la viñeta que precede a los elementos de la lista mediante el
atributo tipe=" " en la etiqueta <ul>. Ejemplo:

<ul type="square"> ..... </ul>

Los elementos de esta ejemplo tendrán una viñeta cuadrada.

Los valores que puede tomar el atributo type, para cambiar el estilo de viñeta son los
siguientes:

 disc: Es el valor por defecto. Consiste en un pequeño círculo relleno.

  circle: Consiste en un pequeño círculo con el interior vacío

 square: Consiste en un pequeño cuadrado.

 none: Este valor elimina la viñeta, dejando la lista sin viñetas. No funciona en todos
los navegadores, por lo que es más recomendable usar estilo CSS.

También podemos poner el atributo type en las etiquetas <li>, con lo cual en una misma
lista podemos conseguir que sus elementos tengan las viñetas distintas.

Sin embargo la forma más habitual de cambiar el estilo de la viñeta es mediante el código
CSS. Con CSS, aparte de estos tipos de viñeta podemos poner otros, incluso podemos
poner una pequeña imagen como elemento de estilo. Podemos ver esto en el manual de
CSS en el apartado dedicado a las listas.

La siguiente página de ejemplo muestra los diferentes tipos de listas que hemos visto hasta
ahora:

Ve