Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada linea y dónde acaba la lista. Los etiquetas usadas en cada término deben estar al principio de la línea.
El elemento LI indenta el párrafo y es un elemento de bloque, siempre comienza en una nueva línea y ocupa todo el ancho disponible, es decir se extiende hacia la izquierda y la derecha hasta donde puede.
HTML soporta varios tipos de listas que pueden ser anidados unos con otras y deben estar en el cuerpo BODY del documento.
Se trata de una lista numerada, en orden de importancia. Cada elemento se define con una etiqueta LI (List Item).
<ol [tipe=tipo][start=n][reversed=reversed]> <li> ... </ol>
| Atributo | Descripción |
|---|---|
| type | Tipo de numeración: 1, I, i, A o a. |
| start | Inicio |
| reversed | Especifica descendente |
<OL> <LI>Click en el botón URL. <LI>Escribe la dirección que quieres ver. <LI>Enter para ver la página Web. </OL>
También admite atributos globales como: id, class, name, title, draggable, hidden, etc
Define el tipo de identificador de los elementos de la lista.
| Valor | Resultado |
|---|---|
| 1 | 1, 2, 3 ... (por omisión) |
| A | A, B, C ... |
| a | a, b, c ... |
| I | I, II, III ... |
| i | i, ii, iii ... |
En CSS debes usar list-style-type: upper-roman; para obtener mismo efecto. Otros valores: none|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin|armenian|georgian|lower-alpha|upper-alpha|inherit
<OL TYPE=a> <LI>Primer elemento de la lista <LI>Segundo elemento de la lista <LI>Tercer elemento de la lista </OL>
Indica en qué valor empezará la lista según TYPE.
<OL START=5> <OL START=E> <OL START=IV>
Numeracion en forma descendente.
<ol start=50 reversed=reversed> <li>Cafe <li>Leche <li>Azucar </ol>
Indica en qué valor especifico de un elemento según TYPE. Afecta al elemento actual y posteriores.
<OL> <LI>Primero <LI VALUE=4>Segundo <LI>Tercero </OL>
Ordena la lista en forma compacta.
<OL COMPACT> <LI>Primer elemento de la lista <LI>Segundo elemento de la lista <LI>Tercer elemento de la lista </OL>
Ya no tiene ningún efecto en la mayoría de navegadores.
Este etiqueta es usado para definir una lista de términos, cada uno precedido por una marca (bullet). Cada elemento de la lista empieza con la etiqueta LI (List Item)
<UL> <LI> ... </UL>
<UL> <LI>Primer elemento de la lista <LI>Segundo elemento de la lista <LI>Tercer elemento de la lista </UL>
Ordena la lista en forma compacta.
<UL COMPACT> <LI>Primer elemento de la lista <LI>Segundo elemento de la lista <LI>Tercer elemento de la lista </UL>
Ya no tiene ningún efecto en la mayoría de navegadores.
También admite atributos globales como: id, class, name, title, draggable, hidden, etc
Define el tipo de identificador de los elementos de la lista.
| Valor | Resultado |
|---|---|
| disc | disco (por omisión) |
| circle | circulo |
| square | cuadrado |
En CSS debes usar list-style-type: square; para obtener mismo efecto. Otros valores: none|disc|circle|square|inherit
<UL TYPE=square> <LI>Primer elemento de la lista <LI>Segundo elemento de la lista <LI>Tercer elemento de la lista </UL>
Se trata de una lista de términos a los que se les adjunta su definición. Con <DT> se pone el término a definir y con <DD> la definición del término.
<DL> <DT>WWW<DD>Word Wide Web <DT>SGML<DD>Standard Generalized Markup Language. <DT>HTML<DD>Hypertext Markup Language. <DT>URL<DD>Uniform Resource Locator. <DT>URI<DD>Uniform Resource Identifier. <DT>MIME<DD>Multipurpose Internet Mail Extensions <DT>BROWSER<DD>Herramienta usada para visualizar documentos HTML. </DL>
Ordena la lista en forma compacta.
<DL COMPACT> <DT>Primer<DD>elemento de la lista <DT>Segundo<DD>elemento de la lista <DT>Tercer<DD>elemento de la lista </DL>
Ya no tiene ningún efecto en la mayoría de navegadores.
<OL> <LI>Primero - primero <OL TYPE=a> <LI>Primero - segundo <OL TYPE=i> <LI>Primero - tercero <LI>Segundo - tercero <LI>Tercero - tercero </OL> <LI>Segundo - segundo <LI>Tercero - segundo </OL> <LI>Segundo - primero <LI>Tercero - primero </OL>
Así se ve una lista numerada anidada...
<UL> <LI>Frutas <UL> <LI>Rojas <UL> <LI>Fresa <LI>Cereza </UL> <LI>Verdes <UL> <LI>Tuna <LI>Uva </UL> <LI>Amarillas <UL> <LI>Mango <LI>Limón </UL> </UL> <LI>Verduras <UL> <LI>Rojas <UL> <LI>Tomates <LI>Rabanos </UL> <LI>Blancos <UL> <LI>Nabos <LI>Coliflor </UL> <LI>Amarillas <UL> <LI>Paprika <LI>Zapallo </UL> </UL> </UL>
Así se ven las listas no numerada anidadas...
Es importante notar que en el caso del elemento UL los tipos de marcacion de elemento varian segun anidacion de forma automatica.
<DL> <DT>Perro<DD>Animal de cuatro patas que ladra. <DT>Gato<DD>Animal de cuatro patas que maúlla y se lleva muy mal con el perro. <DT>Pájaro<DD>Animal que vuela, está recubierto de plumas y le gusta comer al gato. </DL>
Así se ve un glosario...
<DL> <DD>Manzana <DD>Plátano <DD>Uva </DL>
Así se ve el truco...