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

La etiqueta <LI>.-

Los posibles tipos de listas regulares se definen cada uno mediante una etiqueta propia, <OL> y <UL, pero hay una pieza constructora común a ellas, y es que los diferentes elementos que forman la lista se definen mediante las parejas de etiquetas <LI>...</LI>.

Se debe usar una pareja de estas etiquetas por cada uno de los elementos de la lista, ya que aunque los navegadores permiten no escribir las etiquetas de cierre </LI> o escribir sólamante la correspondiente al último elemento (así lo hace por defecto HomeSite), se deben siempre cerrar todas las etiquetas HTML que poséan pareja de cierre.

Atributos de la etiqueta <LI>.

Los principales atributos de la etiqueta <LI> son:

* type="tipo": define el tipo de secuenciador a usar en la lista. Los secuenciadores en una lista ordenada van en su orden natural lógico. El parámetro tipo puede tomar los valores:

• type="tipo" , que va a definir el símbolo definitorio de cada elemento de la lista. A diferencia del atributo análogo de las etiquetas <OL> y <UL>, en este caso se pueden fijar símbolos diferentes para cada uno de los elementos de una misma lista, siempre que pertenexcan al mismo tipo. Por este motivo, el valor del parámetro "tipo" puede ser cualquiera de los vistos para la etiqueta <OL> o cualquiera de los vistos para la etiqueta <UL>. Ejemplos:

  <ol>  <li>primer elemento</li>  <li type="A">segundo elemento</li>  <li type="I">tercer elemento</li> </ol>

  primer elemento segundo elemento tercer elemento

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

  primer elemento segundo elemento tercer elemento

* title="mensaje": establece un mensaje o título asociado a un elemento particular de la lista, que se mostrará en forma de tip o bocadillo cuando el usuario sitúe ;el cursor sobre dicho elemento. Ejemplo (situad el cursor encima del segundo elemento de la lista de la izquierda):

<ul>  <li>primer elemento</li>  <li title="éste es el segundo elemento">segundo elemento</li>  <li>tercer elemento</li> </ul>

primer elemento segundo elemento tercer elemento

* dir="ltr / rtl": establece el sentido de desarrollo del texto de un elemento concreto 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. Ejemplo:

<ul>  <li>primer elemento</li>  <li dir="rtl">segundo elemento</li>  <li>tercer elemento</li> </ul>

primer elemento segundo elemento tercer elemento

Como véis, el elemento de la lista afectado se sitúa a la derecha de la pantalla, y se empieza 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 el texto de un elemento en concreto de la lista. Los valores posibles son abreviaturas comunes del idioma usado, como es (español), en (inglés) o it (italiano).

* value="valor": que asigna un valor concreto a un elemento de la lista, que se suele usar en casos de diferentes posibilidades entre un conjunto de posibles valores. Su uso es a nivel de código, y no origina efecto visible en la ventana del navegador.

La etiqueta <LI> 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.