Crea tu web, tutor html, css

Listas

El formato 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 ellas se pueden anidar (meter unas dentro de otras) formando árboles más o menos complejos. Todos los tipos siguen el mismo formato:

<tipo_lista> <li>Primer elemento </li> <li>Segundo elemento </li> </tipo_lista>

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

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

Las listas están formadas por un conjunto de elementos que se presentan habitualmente en vertical y como bloque. Esta presentación es totalmente reconfigurable mediante CSS

Listas desordenadas (viñetas)

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

Las listas ordenadas o no ordenadas son muy útiles para crear menus de navegación de un sitio web.

Listas ordenadas

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
  1. Primer elemento
  2. 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>.
  1. Tipo 1
  2. Tipo a
  3. Tipo A
  4. Tipo i
  5. Tipo I
start="num" Indica al navegador el número por el que se empezará a contar los elementos de la lista.
  1. Primer elemento
  2. Segundo elemento
value="num" Atributo de <li>, actúa como START pero a partir de un elemento predeterminado.
  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento

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

El nombre de lista ordenada indica que los elementos se diferencian entre sí por algún tipo de numeración. No significa que se ordenen de alguna forma particular.

Listas de definiciones

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

Este formato es útil para crear apartados en un texto, con un título y un contenido.