Listas

El lenguaje HTML nos permite crear listas en las páginas web de una manera casi tan simple y efectiva como en un procesador de textos, para ello utiliza las etiquetas de listas, de las que existen varios tipos.

Todas las listas se pueden anidar (meter unas dentro de otras) formando árboles más o menos complejos. Incluspo listas de distintos tipos pueden ser creadas dentro de otras.

Para crear culquier tipo de listos se sigue el mismo formato:

tipo_lista puede ser una de las siguientes: ul, ol, dl.

Recuerda que puedes probar todos estos códigos en el editor ediweb online

La etiqueta <ul> significa unordered list, literalmente lista desordenada, y se corresponde con las viñetas en los procesadores de texto: son listas donde cada elemento está precedido de un símbolo, como un punto o un disco. EL formato es el que sigue:

<ul>
<li>Juan Pedro</li>
<li>Luisa</li>
</ul>

En el navegador se verá como

• Juan Pedro
• Luisa

A partir del HTML 3.2 la etiqueta <ul> admite estos parámetros:

Parámetro	Significado	Resultado
compact	Indica al navegador que debe representar la lista de la manera más compacta posible.	Primer elemento Segundo elemento
type="disc", "circle", "square"	Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <li>.	Tipo disc Tipo circle Tipo square

Recuerda que puedes probar todos estos códigos on line en el editor ediweb

La etiqueta <ol> responde a Ordered List, lista ordenada, y nos permite presentar listas como esquemas numerados de un solo nivel, o sea, que cada elemento de la lsita lleva un número de orden. Por ejemplo,

<ol><li>Primer elemento</li><li>Segundo elemento</li></ol>

En el navegador se mostrará como

1. Primer elemento
2. Segundo elemento

El HTML 3.2 admite estos parámetros para la etiqueta <ol> :

Parámetro	Significado	Resultado
compact	Mostrar la lista lo más compact posible	Primer elemento Segundo elemento
type="1", "a", "A", "i", "I"	Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <li>.	Tipo 1 Tipo a Tipo A Tipo i Tipo I
start="num"	Indica al navegador el número por el que se empezará a contar los elementos de la lista.	Primer elemento Segundo elemento
value="num"	Atributo de <li>, actúa como START pero a partir de un elemento predeterminado.	Primer elemento Segundo elemento Tercer elemento

Recuerda que puedes probar todos estos códigos on line en el editor ediweb

Este tipo de lista utiliza las etiquetas <dt>y <dd> en lugar de <li>. En estas lista cada elemento tiene una entrada de texto indentada respecto a dicho elemento. Es como si tuvieramos una lista de conceptos y sus definiciones (el texto indentado). Para entenderlo lo mejor es verlas en marcha:

<dl>
<dt>HTML</dt>
<dd>Es un lenguaje de definición de páginas web.</dd>
<dt>Java</dt>
<dd>Es un lenguaje de programación.</dd>
</dl>

se verá como

HTML

Es un lenguaje de definición de páginas web.

Java

Es un lenguaje de programación.

La etiqueta <dl> sólo admite como parámetro el ya conocido compact, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores. Un elemento <dt> puede contener varios elementos <dd>.

Recuerda que puedes probar todos estos códigos on line en el editor ediweb