Tutorial:XHTML

Listas desordenadas

Las listas desordenadas son también las más usadas. Se delimitan por las etiquetas <ul> y </ul> (UL = Unordered List), y cada uno de los atributos se citará mediante la etiqueta <li> y </li> (LI = List Item).

Este tipo de listas no siguen ningún orden lógico.

Un ejemplo sería el siguiente:

<h1>Países del mundo</h1>
<ul>
	<li>Australia</li>

	<li>España</li>

	<li>Brasil</li>

</ul>

El resultado puede verse aquí.

Listas dentro de listas (SUBLISTAS)

Una anidación de listas consiste en crear la misma estructura de una lista (ordenada o desordenada) dentro de un ítem de lista del primer nivel.

Esto quiere decir que integraremos una etiqueta <ul> con sus respectivos ítems de listas dentro de una etiqueta <li>.

Podemos crear tantos niveles como queramos siguiendo bien la estructura lógica de la listas, como en el siguiente ejemplo.

<h1>Países del mundo</h1>
<ul>
	<li>Australia</li>

	<li>España
		<ul>
			<li>Zaragoza</li>
			<li>Sevilla</li>
			<li>Lleida</li>
		</ul>
	</li>
	<li>Brasil</li>

</ul>

Así lo mostrará el navegador

El atributo TYPE para listas desordenadas

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> (<ul type="tipo de viñeta">), si queremos que el estilo sea válido para toda la lista,o dentro le la etiqueta <li> (<li type="tipo de viñeta">) si queremos hacerlo específico de un solo elemento.

A continuación se definen los posibles valores de TYPE para listas desordenadas:

circle
disc (es el valor que se toma por defecto)
square

Vamos a ver un ejemplo de lista con un cuadrado en lugar de la clásica viñeta redondeada. Además, 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>
	<li>Elemento 2</li>
	<li>Elemento 3</li>
	<li type="circle">Elemento 4</li>
</ul>

El resultado será el siguiente:

Elemento 1
Elemento 2
Elemento 3
Elemento 4