LISTAS

HTML nos ofrece la posibilidad de hacer tres tipos de listas:

  • No ordenadas
  • Ordenadas
  • Listas de definiciones

Listas no ordenadas:

Código Resultado
<UL>
    <LI>Primer elemento
    <LI>Segundo elemento
    <LI>Tercer elemento
</UL>

  • Primer elemento
  • Segundo elemento
  • Tercer elemento

Listas ordenadas:

Código Resultado
<OL>
    <LI>Primer elemento
    <LI>Segundo elemento
    <LI>Tercer elemento
</OL>

  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento

Atributos:

Atributo Valor Descripción
type Ver la tabla siguiente Indica el estilo de la lista a mostrar.
start numero entero Sólo para <ol>. Número a partir del cual se empieza a numerar la lista
value entero Sólo para <li>. Fija un número de orden para el elmento en el que aparece. El valor debe ser un entero aunque en la lista se pueda mostrar una letra dependiendo del tipo de numeración.
compact   Presenta la lista de forma que su representación ocupe el menor espacio posible.

Type Estilo de la numeración
Para <ol>
 
1 1, 2, 3, ...
a a, b, c, ...
A A, B, C, ...
i i, ii, iii, ...
I I, II, III, ...
Para <ul>
 
disc disco
square cuadrado
circle círculo

Las listas se pueden anidar.

Ejemplo:

Código Resultado
<ul type="square">
    <li>Primer elemento
    <li>Segundo elemento
    <ol type="a" start="3">
        <li>Lista uno
        <li>Lista uno
    </ol>
    <li>Tercer elemento
</ul>
  • Primer elemento
  • Segundo elemento
    1. Lista uno
    2. Lista dos
  • Tercer elemento

Listas de definiciones:

Código Resultado

<DL>
<DT>Listas ordenadas:
<DD>Etiquetas: <ol><li></ol>
<DT>Listas no ordenadas:
<DD>Etiquetas: <ul><li></ul>
</DL>

Listas ordenadas:
Etiquetas: <ol><li></ol>
Listas no ordenadas:
Etiquetas: <ul><li></ul>

Ejercicio:

En el documento index.html hacer una lista ordenada numerada con letras minúsculas, que contenga otra lista no ordenada con círculos. Probar también un ejemplo de lista de definiciones.