Listas en HTML (III)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Listas regulares sin ordenar.-

El segundo tipo de listas regulares son aquellas que muestran una serie de elementos que no están dispuestos según un patrón específico de ordenación, es decir, que están definidos los diferentes elementos mediante un signo determinado común a todos ellos, signo que normalmente se denomina viñeta o topo. Todas las listas de este tipo se construyen partiendo de la pareja de etiquetas base <UL>...</UL> (Unordered List=Lista Sin ordenar).

Estas etiquetas base forman un bloque por sí mismas, deben siempre ir en parejas apertura-cierre y contienen en su interior un número variable de etiquetas <LI>...</LI>, que son las que van a definir los diferentes elementos textuales de las lista.

Atributos de la etiqueta <UL>.

La etiqueta <UL> posée una serie de atributos similares a los de la etiqueta OL, que nos van a permitir configurar el aspecto que va a tener la lista. Los principales son:

* type="tipo": define el tipo de topo o viñeta a usar en la lista. El parámetro tipo puede tomar los valores:

• type="disc", que define cada elemento de la lista mediante un pequeño círculo negro (disco). Ejemplo:

  <ul type="disc">  <li>primer elemento</li>  <li>segundo elemento</li>  <li>tercer elemento</li> </ul>

  primer elemento segundo elemento tercer elemento

• type="circle", que define cada elemento de la lista mediante una pequeña circunferencia negra (aunque la traducción sería circulo). Ejemplo:

  <ul type="circle">   <li>primer elemento</li>   <li>segundo elemento</li>   <li>tercer elemento</li> </ul>

  primer elemento segundo elemento tercer elemento

• type="square", que define cada elemento de la lista mediante un pequeño cuadradito negro. Ejemplo:

  <ul type="square">   <li>primer elemento</li>   <li>segundo elemento</li>   <li>tercer elemento</li> </ol>

  primer elemento segundo elemento tercer elemento

* title="mensaje": establece un mensaje o título asociado a la lista, que se mostrará en forma de tip o bocadillo cuando el usuario sitúe el cursor sobre la lista. Se puede usar para explicar la finalidad de las lista, si ésta no está lo suficientemente explicada por un texto anterior a ella o por el contexto en el que se encuentra. Si no es así, no conviene usar esta etiqueta, ya que los tips suelen despistar y molestar al usuario. Ejemplo (situad el cursor encima de la lista de la izquierda):

<ul title="ejemplo del atributotitle">   <li>primer elemento</li>   <li>segundo elemento</li>   <li>tercer elemento</li> </ul>

primer elemento segundo elemento tercer elemento

* dir="ltr / rtl": establece el sentido del texto de los elementos de la lista, y puede ser ltr=left to right (de izquierda a derecha) o rtl=right to left (de derecha a izquierda). El valor por defecto es ltr, que corresponde a los idiomas occidentales más comunes. El valor rtl se utiliza en idiomas como el árabe, en los que el texto fluye en los escritos desde la derecha hacia la izquiera. Vamos a ver un ejemplo de este tipo, con <ol dir= "rtl">:

• primer elemento
• segundo elemento
• tercer elemento

Como véis, los elementos de la lista se sitúan a la derecha de la pantalla, y se empiezan a completar hacia la izquierda, aunque en ordenadores configurados para lenguajes "normales" el texto fluirá en su sentido habitual.

* lang="idioma": que define el idioma usado en los textos de la lista. Los valores posibles son abreviaturas comunes del idioma usado, como es (español), en (inglés) o it (italiano).

La etiqueta <UL> posée además otras serie de atributos como el conjunto formado por STYLE, CLASS e ID, que se usan para asignar estilos a la lista mediante CSS (Hojas de Estilos en Cascada), y que veremos más adelante.