Listas en HTML

De ChuWiki
Saltar a: navegación, buscar

En HTML podemos definir tres tipos de listas:

  • Listas sin orden (Unordered List, tag UL)
  • Listas ordenadas (Ordered List, tag OL)
  • Listas de definición de datos (Data Definition, tag DD)

Lista sin orden

Una serie de elementos en el que el orden no es importante. El navegador los mostrará en el orden que los pongamos, pero los mostrará poniendo puntos delante de cada item, o lo que se especifique en los estilos de la página si los hay (Ver hojas de estilo CSS). La lista comienza con el tag ul, los item de la lista se meten entre tags li y se cierra con /ul

El siguiente ejemplo

<ul>
<li>coche</li>
<li>bicicleta</li>
<li>moto</li>
</ul>

se verá así en el navegador

  • coche
  • bicicleta
  • moto

El cierre de las etiquetas li es opcional, por lo que podríamos no poner /li

Listas ordenadas

Son listas en los que el orden sí es importante. El navegador lo mostrará, al igual que en las no ordenadas, en el mismo orden que pongamos los item, pero en vez de un puntito, pondrá un número consecutivo delante de cada item. La lista comienza con el tag ol, los items se ponen entre tags li, y se cierra con /ol. La siguiente lista

<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>

se verá así en el navegador

  1. item 1
  2. item 2
  3. item 3

Listas de definición de datos

Son los listas en las que cada item está compuesto de dos partes: una etiqueta (Data Tag DT) o nombre del dato y una definición (Data Definition DD) o definición del dato. La lista comienza con el tag dl, los items van con parejas de tags dt y dd. La lista se cierra con /dl. El siguiente ejemplo

<dl>
<dt>bici
<dd>engendro de dos ruedas
<dt>coche
<dd>engendro con cuatro ruedas
</dl>

se ve así

bici
engendro de dos ruedas
coche
engendro con cuatro ruedas

El cierre de los tags dt y dd es opcional.


Enlaces externos