Las listas representan uno
de los más conocidos elementos de HTML, porque nos permiten ordenar o enumerar datos
o elementos, organizar la información dentro de nuestros documentos. Tenemos cinco
tipos de listas:
- · Listas numeradas u ordenadas
- · Listas con viñetas o sin orden
- · Listas de menú y de directorio
- · Listas de glosario
- · Listas anidadas
Listas numeradas u ordenadas: Las engloban las etiquetas <ol>.....</ol> y cada
elemento de la lista estará encabezado por la etiqueta <li> que puede o no llevar la etiqueta de
cierre </li>.
(Inclusive en XHTML). Cuando el navegador interpreta una lista ordenada, numera
y sangra cada elemento en forma secuencial.
Por ser listar ordenadas,
los símbolos por defecto son números, pero esto se puede cambiar
Código documento
|
Visualizamos en nuestro navegador
|
 |
 |
Con este atributo se podía
hacer que la lista estuviera definida por números (li type="1"),
letras minúsculas (li type="a"), letras mayúsculas (li
type="A"), número romanos en minúscula (li type="i") o
mayúscula (li type="I").
Código documento
|
Visualizamos en nuestro navegador
|
 |
 |
Listas
con viñetas o sin orden: Las
engloban las etiquetas <ul>.....</ul> y cada elemento de la lista
estará encabezado por la etiqueta <li> que
puede o no llevar la etiqueta de cierre </li>. (Inclusive en XHTML). El resultado es que el
navegador inserta viñetas (marcadores) delante de cada elemento.
Código:
Visualizamos en el navegador:
El atributo principal de
esta lista es type, veamos su uso con un ejemplo:
Código:
Visualizamos en el navegador:
Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser,
prácticamente, idéntico al de las listas con viñetas
Menú:
Englobadas por las etiquetas <menu>.....</menu> y cada elemento encabezado
por la etiqueta<li>.
Código:
Visualizamos en el navegador:
Directorio:
Englobadas por las etiquetas <dir>.....</dir> y cada elemento
encabezado por la etiqueta <li>.
Código:
Visualizamos en el navegador:
Listas de glosario: Cada
elemento de la lista está compuesto por un término y una definición. Estas
listas se engloban con las etiqueta<dl>.....</dl>. Para el elemento
se usa la etiqueta <dt> y para la definición la etiqueta <dd>.
La etiqueta <dl> indica que
dentro de ella va a ir una lista de definiciones o lista de descripciones.
La etiqueta <dt> indica que
dentro de ella va un término que vamos a definir.
La etiqueta <dd> nos dice
que dentro de ella se encuentra una definición o descripción asociada a un
término.
Código:
Visualizamos en el navegador:
Listas anidadas: Consiste en poner una lista
dentro de otra, de manera que la lista secundaria sangre respecto a la
principal.
Visualizamos en el navegador:
