Las Listas de elementos desordenadas

Para construir una lista se utilizan dos etiquetas, una para indicar que va a comenzar la lista y otra cada vez que empecemos a definir un elemento de dentro de esa lista. La lista es solo una, pero los elementos que la componen pueden ser varios.

La etiqueta de apertura de una lista desordenada es <ul> y la de cierre es </ul>. Por tanto, una lista desordenada totalmente vacia, sin elementos dentro, tendría este código Html:

Las etiquetas de inicio y fin de cada uno de los elementos que le queramos añadir a esa lista, serían <li> y </li>, de modo que el código Html de una lista con tres elementos vacios, sería este:

Un poco sosa, no? Para añadir algo a cada elemento, basta con colocar ese algo entre las etiquetas <li> y </li>. Vamos por ejemplo a contruir una lista con los tres enlaces del ejemplo que estamos viendo en estas páginas atrás. El código de esos tres enlaces era este:

. . . . . . . .
<a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
. . . . . . . .

de modo que para añadirlos a la lista anterior, solo habría que colocar las etiquetas de inicio y fin de lista antes y después de todo ese código y además colocar las etiquetas de inicio y fin de elemento antes y después de cada enlace. Quedaría así:

. . . . . . . .
<ul>
<li><a href="#titulouno" title="Ir al título uno">Ir al título uno</a></li>
<li><a href="#titulodos" title="Ir al título dos">Ir al título dos</a></li>
<li><a href="#titulotres" title="Ir al título tres">Ir al título tres</a></li>
</ul>
. . . . . . . .

Aunque como vamos diciendo, el aspecto que tomen nos importa un pepino, éste es el resultado del ejemplo una vez metidos los enlaces en una lista desordenada.

Tanto la etiqueta <ul> como las etiquetas <li> son etiquetas de bloque, lo que significa que NO es necesario añadir el salto de línea con <br /> si queremos que aparezcan un enlace bajo el otro. Con CSS como te comenté, podemos hacer si queremos que estos elementos aparezcan en línea y no uno bajo otro, para construir un menú horizontal, por ejemplo. Ya lo veremos en CSS, pero sigue siendo muy útil que estén incluidos en una de estas listas.

Ves ese circulito negro que aparece al a izquierda de cada elemento? Es lo que te decía antes que podemos retocar con los estilos CSS, de modo que si no te gusta su aspecto, no te preocupes, se podrá cambiar cuando aprendamos CSS.