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

Ejemplo 1: Lista numerada.

<OL>
<LI>Alfonso Ugarte
<LI>Miguel Grau
<LI>Ramón Castilla
</OL>

Así se ve una lista numerada...

  1. Alfonso Ugarte
  2. Miguel Grau
  3. Ramón Castilla

Ejemplo 2: Lista no numerada.

<UL>
<LI>Tomates</LI>
<LI>Nabos</LI>
<LI>Zanahorias</LI>
</UL>

Así se ve una lista no numerada...

Ejemplo 3: Anidar lista no numerada.
Así se ven las listas no numerada anidadas...

Ejemplo 4: 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.

Ejemplo 4: Simular una sangría.

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

Así se ve el truco...

Manzana
Plátano
Uva