# Listas

## Tipos de listas

Existen tres tipos de listas:

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

## 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 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:

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

Los navegadores muestran marcadores distintos según la profundidad de la lista.

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

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

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