En el curso has visto que existían tres tipos de lista: ordenadas, desordenadas y listas de definición. Las listas forman un bloque por lo que es posible anidarlas y sus elementos contener otras estructuras de bloque como párrafos o tablas.
Las listas desordenadas muestran una serie de elementos en los que no se indica orden. Se definen con las etiquetas <ul> ... </ul>. Añaden un símbolo gráfico a cada elemento de la lista además de sangrarla. Forman un bloque por lo que es posible anidarlas, cada nivel de anidación añade un nuevo sangrado y cambia el símbolo gráfico del elemento. Los elementos de la lista están definidos mediante etiquetas <li>... </li>. En el cuadro inferior puedes ver una lista desordenada sencilla y su código.
| CODIGO | FUNCIÓN | RESULTADO |
|---|---|---|
|
Aragón <ul> <li>Zaragoza <li>Huesca <li>Teruel </ul> |
Es la etiqueta de apertura Elemento de la lista Elemento de la lista Elemento de la lista Cierra la lista desordenada |
Aragón
|
| ATRIBUTO | FUNCIÓN |
|---|---|
| TYPE | Cambia el dibujo que precede a cada elemento de la lista. Su valor puede ser disc; circle; square. |
| COMPACT | No precisa ningún valor. El navegador intentará comprimir la lista para ocupar menos espacio. |
| DIR | Establece el sentido del texto de los elementos de la lista, puede tomar los valores ltr (izquierda a derecha) o rtl(derecha a izquierda). Su uso se aplica a aquellos idiomas en los que se escribe de derecha a izquierda. |
Las listas ordenadas muestran una serie de elementos ordenados por números arábigos, romanos o letras. Se utilizan principalmente para crear instrucciones paso a paso o descripciones generales, ya que el navegador numera automáticamente los elementos de la lista y sangra los elementos. Se definen con las etiquetas <oul> ... </ol> y los elementos de de la lista están idefinidos mediante las etiquetas <li>... </li>. Al igual que las listas desordenadas tienen estructura de bloque por lo que se pueden anidar y sus elementos contener otras estructuras de bloque distintas como párrafos o tablas, en cada nivel de anidación aumenta el sangrado manteniendo el caracter alfanumérico que precede al elemento. En la tabla inferior puedes ver una lista ordenada sencilla y su código.
| CÓDIGO | FUNCIÓN | RESULTADO |
|---|---|---|
| Aragón <ol> <li>Zaragoza <li>Huesca <li>Teruel </ol> |
Es la etiqueta de apertura Elemento de la lista Elemento de la lista Elemento de la lista Cierra la lista |
Aragón
|
| ATRIBUTO | FUNCIÓN |
|---|---|
| TYPE | Cambia el formato del número que precede a cada elemento. Su valor puede ser 1 (números arábigos), a (minúsculas), A (mayúsculas), i (romanos minúsculas), I (romanos mayúsculas). |
| START | Indica el valor numérico por el que comenzará contar los elementos de la lista. |
| COMPACT | No precisa ningún valor. El navegador intentará comprimir la lista para ocupar menos espacio. |
| DIR | Establece el sentido del texto de los elementos de la lista, puede tomar los valores ltr (izquierda a derecha) o rtl(derecha a izquierda). Su uso se aplica a aquellos idiomas en los que se escribe de derecha a izquierda. |
El elemento <li> ...<li> define los elementos que componen las listas ordenadas y desordenadas. Aunque los navegadores permiten no escribir el elemento </li> o colocarlo únicamente en el último elemento de la lista es recomendable utilizar la etiqueta de cierre.
| ATRIBUTO | FUNCIÓN |
|---|---|
| TYPE | Admite los valores de las listas ordenadas (1, A, a, i, I) y los de las desordenadas (disc, circle, square). |
| VALUE | Asigna un valor concreto al elemento de una lista ordenada que contenga el atributo. Los siguientes elementos de la lista continuarán la numeración a partir del valor establecido. |
| TITLE | Proporciona un mensaje informativo asociado al elemento de la lista en el que se incluya dicho atributo. El mensaje se mostrará al colocar el ratón encima del elemento de la lista en forma de recuadro amarillo. |
Una lista de definición es una lista cuyos elementos están formados por un término y una definición asociada a dicho término, como si fuese una entrada de diccionario o un glosario. LAs listas de definición se crean con las etiquetas <dl> ... </dl>, el término a definir se indica mediante la marca <dt> y la definición con <dd>, la definión aparece en la línea inferior y sangrada con respecto al término. Las etiquetas <dt> y <dd> no necesitan etiquetas de cierre.
| CÓDIGO | FUNCIÓN | RESULTADO |
|---|---|---|
| Vocabulario <dl> <dt>Lista <dd>Relación de ... <dt>Listín <dd>Agenda para apuntar ... </dl> |
Apertura de la tabla elemento a definir Definición del elemento elemento a definir Definición del elemento Cierre de la lista |
Vocabulario
|
Es posible el anidar listas, colocarlas dentro de un elemento de otra lista, fácilmente, sin limitación del número de niveles de anidamiento, solamente hemos de tener cuidado de no cruzar y cerrar bien las etiquetas de apertura.
La forma de anidarlas es colocar dentro de la etiqueta <li> la estructura completa de la nueva lista y comprobar que hemos cerrado con la etiqueta correspondiente la nueva lista así como el elemento <li> que la contiene.
También es posible anidar dentro de los elementos de una lista cualquier elemento de bloque, como párrafos y tablas.
El elemento <li> de las listas ordenadas y desordenadas y los elementos <dd> y <dt> de las listas de definición no requieren un elemento de cierre pero es recomendable su uso ya que su uso será obligatorio para cumplir las reglas de XHTML.
Es bastante frecuente el uso de las etiquetas <dl> y <ul> para sangrar párrafos, en especial de esta última, no existe una opinión unánime sobre este uso. La utilización de hojas de estilo es preferible a las etiquetas.
Existe un elemento no standard <lh></lh> que sirve para poner título a la lista (el texto es sangrado a la misma distancia pero no aparece el símbolo gráfico o la numeración delante de él).
En html 4.0 estricto el atributo type se ha eliminado del standard por lo que sus funciones deberán ser realizadas mediante hojas de estilo.