Elementos de lista

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 parrafo 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.

1. Lista numerada OL + LI

Se trata de una lista numerada, en orden de importancia. Cada elemento se define con una etiqueta LI (List Item).

<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>

  1. Click en el botón URL.
  2. Escribe la dirección que quieres ver.
  3. Enter para ver la página Web.

1.1 Atributo COMPACT

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>

  1. Primer elemento de la lista
  2. Segundo elemento de la lista
  3. Tercer elemento de la lista

Ya no tiene ningun efecto en la mayoria de navegadores.

1.2 Atributo TYPE

Define el tipo de identificador de los elementos de la lista.

Valores atributo TYPE
ValorResultado
11, 2, 3 ... (por omisión)
AA, B, C ...
aa, b, c ...
II, II, III ...
ii, 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>

  1. Primer elemento de la lista
  2. Segundo elemento de la lista
  3. Tercer elemento de la lista

1.3 Atributo START

Indica en qué valor empezará la lista segun TYPE.

<OL START=5>
<OL START=E>
<OL START=IV>

1.4 Atributo VALUE

Indica en qué valor especifico de un elemento segun TYPE. Afecta al elemento actual y posteriores.

<OL>
<LI>Primero
<LI VALUE=4>Segundo
<LI>Tercero
</OL>

  1. Primero
  2. Segundo
  3. Tercero

2. Lista no numerada UL + LI

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>Primer elemento de la lista
<LI>Segundo elemento de la lista
<LI>Tercer elemento de la lista
</UL>

2.1 Atributo COMPACT

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 ningun efecto en la mayoria de navegadores.

2.2 Atributo TYPE

Define el tipo de identificador de los elementos de la lista.

Valores atributo TYPE
ValorResultado
discdisco (por omisión)
circlecirculo
squarecuadrado

En CSS debes usar list-style-type: square; para obtener mismo efecto. Otros valores: none|disc|circle|square|inherit

<OL TYPE=a>
<LI>Primer elemento de la lista
<LI>Segundo elemento de la lista
<LI>Tercer elemento de la lista
</OL>

  1. Primer elemento de la lista
  2. Segundo elemento de la lista
  3. Tercer elemento de la lista

3. Lista de definiciones o glosario DL + DD + DT

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>

WWW
Word Wide Web
SGML
Standard Generalized Markup Language.
HTML
Hypertext Markup Language.
URL
Uniform Resource Locator.
URI
Uniform Resource Identifier.
MIME
Multipurpose Internet Mail Extensions
BROWSER
Herramienta usada para visualizar documentos HTML.

3.1 Atributo COMPACT

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>

Primer
elemento de la lista
Segundo
elemento de la lista
Tercer
elemento de la lista

Ya no tiene ningun efecto en la mayoria de navegadores.

4. Ejemplo de listas

4.1 Listas numeradas anidadas

<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...

  1. Primero - primero
    1. Primero - segundo
      1. Primero - tercero
      2. Segundo - tercero
      3. Tercero - tercero
    2. Segundo - segundo
    3. Tercero - segundo
  2. Segundo - primero
  3. Tercero - primero

4.2 Listas no numeradas anidadas

<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.

4.3 Glosario

<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...

Perro
Animal de cuatro patas que ladra.
Gato
Animal de cuatro patas que maúlla y se lleva muy mal con el perro.
Pájaro
Animal que vuela, está recubierto de plumas y le gusta comer al gato.

4.4 Simular una sangría sin viñeta

<DL>
<DD>Manzana
<DD>Plátano
<DD>Uva
</DL>

Así se ve el truco...

Manzana
Plátano
Uva