Listas en HTML: Listas desordenadas

Vemos lo que son las listas y señalamos los tres tipos que hay. Estudiamos las listas desordenadas.

Las posibilidades que nos ofrece el HTML en cuestión de tratamiento de texto son realmente notables. No se limitan a lo visto hasta ahora, sino que van más lejos todavía. Varios ejemplos de ello son las listas, que sirven para enumerar y definir elementos, los textos preformateados y las cabeceras o títulos.

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. Pero esto lo veremos más adelante, cuando apliquemos estilos CSS a las listas.

De momento, en este Manual de HTML, trataremos las listas desde el punto de vista de su construcción y veremos los diferentes tipos que existen, y que podemos utilizar para resolver nuestras distintas necesidades a la hora de escribir textos en HTML.

Referencia: Todos los tipos de listas los hemos explicado en vídeo y se pueden revisar en el Videotutorial de HTML, más concretamente en la entrega siguiente: Vídeo sobre las Listas HTML.

Podemos distinguir tres tipos de listas HTML:

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:

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

Nota: En algunos navegadores no funciona la opción de cambiar el tipo de viñeta a mostrar y por mucho que nos empeñemos, siempre saldrá el redondel negro.

En caso de que no funcione siempre podemos construir la lista a mano con la viñeta que queramos utilizando las tablas de HTML. Veremos más adelante cómo trabajar con tablas.

También es posible definir el tipo de viñeta o bullet por medio de CSS.

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:

Autor

Rubén Alvarez

Rubén es doctor en química y programador aficionado con experiencia en PHP.

Compartir

Comentarios

Gustavo Díaz Jaimes

01/12/2008
me parece interesante que comenten como hacer un HTML compatible con XHTML, creo que continuando con esa tónica faltaría hacer una anotación sobre cerrar SIEMPRE las etiquetas, como las de las listas <ul><il></li></ul> y en el caso de las etiquetas únicas utilizar la sintaxis adecuada como el espacio <br/>
Espero que les sea de utilidad.

eduardomaria

18/12/2012
La logica ante todo.
Excelente el articulo de las listas.
Aunque no menos excelente el comentario.
Tan importantes es el HTML como lo es su extension XHTML.