Listas

Tipos de listas

Existen tres tipos de listas:

listas ordenadas (<ol> ... </ol>
listas no ordenadas (<ul> ... </ul>)
listas de definición (<dl> ... </dl>)

Dentro de un elemento de lista se puede insertar cualquier otro elemento (texto, imágenes, divisiones, tablas, listas, etc).

Listas ordenadas y no ordenadas

Tanto las listas ordenadas (<ol>) como las listas desordenadas (<ul>) tienen la misma estructura:

las etiquetas <ul> ... </ul> o <ol> ... </ol> delimitan la lista completa
las etiquetas <li> ... </li> delimitan cada elemento de la lista

<ol>
  <li>La libertad de usar el programa, con cualquier propósito.</li>
  <li>La libertad de estudiar cómo funciona el programa y adaptarlo a
    tus necesidades. </li>
  <li>La libertad de distribuir copias del programa.</li>
  <li>La libertad de mejorar el programa y hacer públicas las mejoras a
    los demás.</li>
</ol>

La libertad de usar el programa, con cualquier propósito.
La libertad de estudiar cómo funciona el programa y adaptarlo a tus necesidades.
La libertad de distribuir copias del programa.
La libertad de mejorar el programa y hacer públicas las mejoras a los demás.

<ul>
  <li>La libertad de usar el programa, con cualquier propósito.</li>
  <li>La libertad de estudiar cómo funciona el programa y adaptarlo a
    tus necesidades. </li>
  <li>La libertad de distribuir copias del programa.</li>
  <li>La libertad de mejorar el programa y hacer públicas las mejoras a
    los demás.</li>
</ul>

La libertad de usar el programa, con cualquier propósito.
La libertad de estudiar cómo funciona el programa y adaptarlo a tus necesidades.
La libertad de distribuir copias del programa.
La libertad de mejorar el programa y hacer públicas las mejoras a los demás.

La diferencia entre ambos tipos de listas es que los navegadores numeran (con letras o números) los elementos de las listas ordenadas, mientras que en las listas no ordenadas se dibuja un símbolo gráfico.

Listas de definición

Las listas de definición tienen una estructura distinta:

las etiquetas <dl> ... </dl> delimitan la lista completa
las etiquetas <dt> ... </dt> delimitan los términos
las etiquetas <dd> ... </dd> delimitan las definiciones

<dl>
  <dt>software</dt>
    <dd>Conjunto de programas, instrucciones y reglas informáticas para
      ejecutar ciertas tareas en una computadora.</dd>
  <dt>libre</dt>
    <dd>Que tiene facultad para obrar o no obrar.</dd>
    <dd>Que no es esclavo.</dd>
    <dd>Que no está preso.</dd>
    <dd>Licencioso,</dd>
</dl>

software: Conjunto de programas, instrucciones y reglas informáticas para ejecutar ciertas tareas en una computadora.
libre: Que tiene facultad para obrar o no obrar.; Que no es esclavo.; Que no está preso.; Licencioso,

Las etiquetas <dt> y <dd> pueden encontrarse en cualquier orden dentro de un lista de definición, aunque lo razonable es que aparezcan cada <dt> seguido por uno o varios <dd>.

Anidamiento

Las listas pueden presentar cualquier nivel de anidamiento.

<ul>
  <li>Item 1 
    <ol>
      <li>Item 1 de sublista 
        <ul>
          <li>Item 1 de sub-sublista</li>
          <li>Item 2 de sub-sublista</li>
        </ul>
      </li>
      <li>Item 2 de sublista 
        <ol>
          <li>Item 1 de sub-sublista</li>
          <li>Item 2 de sub-sublista</li>
        </ol>
      </li>
      <li>Item 3 de sublista</li>
      <li>Item 4 de sublista</li>
    </ol>
  </li>
  <li>Item 2 
    <ul>
      <li>Item 1 de sublista</li>
      <li>Item 2 de sublista</li>
    </ul>
  </li>
</ul>

Item 1
1. Item 1 de sublista
  - Item 1 de sub-sublista
  - Item 2 de sub-sublista
2. Item 2 de sublista
  1. Item 1 de sub-sublista
  2. Item 2 de sub-sublista
3. Item 3 de sublista
4. Item 4 de sublista
Item 2
- Item 1 de sublista
- Item 2 de sublista

Los navegadores suelen utilizar estilos de marcadores distintos para las sublistas no ordenadas (hasta el tercer nivel), pero no en las listas ordenadas:

		Esto es un punto de una lista Esto es otro punto de la misma lista Esto es un punto de una sublista Esto es otro punto de la misma sublista Esto es un punto de una sub-sublista Esto es otro punto de la misma sub-sublista Esto es un punto de una sub-sub-sublista Esto es otro punto de la misma sub-sub-sublista
		Esto es un punto de una lista Esto es otro punto de la misma lista Esto es un punto de una sublista Esto es otro punto de la misma sublista Esto es un punto de una sub-sublista Esto es otro punto de la misma sub-sublista Esto es un punto de una sub-sub-sublista Esto es otro punto de la misma sub-sub-sublista

Cada lista ordenada sigue su propia numeración, independiente de las demás.

<ol>
  <li>Item 1 
    <ol>
      <li>Item 1 de sublista 
        <ol>
          <li>Item 1 de sub-sublista</li>
          <li>Item 2 de sub-sublista</li>
        </ol>
      </li>
      <li>Item 2 de sublista 
        <ol>
          <li>Item 1 de sub-sublista</li>
          <li>Item 2 de sub-sublista</li>
        </ol>
      </li>
      <li>Item 3 de sublista</li>
      <li>Item 4 de sublista</li>
    </ol>
  </li>
  <li>Item 2 
    <ol>
      <li>Item 1 de sublista</li>
      <li>Item 2 de sublista</li>
    </ol>
  </li>
</ol>

Item 1
1. Item 1 de sublista
  1. Item 1 de sub-sublista
  2. Item 2 de sub-sublista
2. Item 2 de sublista
  1. Item 1 de sub-sublista
  2. Item 2 de sub-sublista
3. Item 3 de sublista
4. Item 4 de sublista
Item 2
1. Item 1 de sublista
2. Item 2 de sublista

Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 7 de noviembre de 2011

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.