Volver al índiceListas

Tipos de listas

Existen tres tipos de listas:

Listas ordenadas y no ordenadas

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

Correcto en Firefox

Correcto en Internet Explorer 

<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>
  1. La libertad de usar el programa, con cualquier propósito.
  2. La libertad de estudiar cómo funciona el programa y adaptarlo a tus necesidades.
  3. La libertad de distribuir copias del programa.
  4. La libertad de mejorar el programa y hacer públicas las mejoras a los demás.
Correcto en Firefox

Correcto en Internet Explorer 

<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 el navegador numera (con letras o números) los elementos de las listas ordenadas, mientras que el navegador simplemente dibuja un símbolo gráfico en los elementos de las listas no ordenadas.

Listas de definición

Las listas de definición tienen una estructura distinta:

Correcto en Firefox

Correcto en Internet Explorer 

<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.

Correcto en Firefox

Correcto en Internet Explorer 

<ul>
  <li>Item 1 
    <ul>
      <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 
        <ul>
          <li>Item 1 de sub-sublista</li>
          <li>Item 2 de sub-sublista</li>
        </ul>
      </li>
      <li>Item 3 de sublista</li>
      <li>Item 4 de sublista</li>
    </ul>
  </li>
  <li>Item 2 
    <ul>
      <li>Item 1 de sublista</li>
      <li>Item 2 de sublista</li>
    </ul>
  </li>
</ul>
  • Item 1
    • Item 1 de sublista
      • Item 1 de sub-sublista
      • Item 2 de sub-sublista
    • Item 2 de sublista
      • Item 1 de sub-sublista
      • Item 2 de sub-sublista
    • Item 3 de sublista
    • Item 4 de sublista
  • Item 2
    • Item 1 de sublista
    • Item 2 de sublista

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

Correcto en Firefox

Correcto en Internet Explorer 

<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>
  1. 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
  2. Item 2
    1. Item 1 de sublista
    2. Item 2 de sublista

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

Autor: Bartolomé Sintes Marco
Última modificación: 2 de diciembre de 2008