Curso de HTML (VIII). Elementos del cuerpo del documento (parte 4). Listas

Las listas son otro elemento de gran utilidad para estructurar contenidos en documentos HTML. Existen dos tipos distintos de listas: listas desordenadas y listas ordenadas.

Listas desordenadas

Su función es la de organizar información en la que el orden de los contenidos no es importante.

Este tipo de listas se declaran con la etiqueta HTML ‘ul‘ y cada uno de los elementos que compone la lista se identifica mediante un elemento ‘li‘.

Los navegadores muestran este tipo de listas indentadas y con un "boliche" diferenciando cada elemento de la lista. Podemos cambiar este dibujo utilizando el atributo ‘type‘ del elemento ‘ul‘, que acepta los valores ‘disc‘, ‘square‘ y ‘circle‘.

Que se vería de la siguiente forma:

Elemento 1
Elemento 2
Elemento 3

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

Listas ordenadas

Este tipo de listas son muy similares a las anteriores pero se consiguen mediante el elemento ‘ol‘ en lugar del elemento ‘ul‘ que veíamos antes.

Que se vería de la siguiente forma:

Elemento 1
Elemento 2
Elemento 3

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

Podemos cambiar también el tipo de numeración utilizado mediante el atributo ‘type‘ del elemento ‘ol‘, que podrá tomar los siguientes valores:

Valor	Estilo
1	Valor por defecto. Numeración arábiga (1, 2, 3, …)
i	Numeración romana en minúsculas (i, ii, iii, …)
I	Numeración romana en mayúsculas (I, II, III, …)
a	Letras minúsculas (a, b, c, …)
A	Letras mayúsculas (A, B, C, …)

También podemos iniciar la numeración desde un determinado número utilizando el atributo ‘start‘ del elemento ‘ol‘ e indicando con un número la posición de partida.

Que se vería de la siguiente forma:

Elemento 1
Elemento 2
Elemento 3

<ol start="6">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ol>

Listas anidadas

También podemos anidar listas en HTML. El navegador aumentará la indentación a medida que aumenta el nivel de anidamiento y, por defecto, cambiará también el dibujo que diferencia cada elemento de la lista.

Que se vería de la siguiente forma en el navegador:

Elemento 1
Elemento 2
- Elemento 2.1
  - Elemento 2.1.1
  - Elemento 2.1.2
- Elemento 2.2
- Elemento 2.3
Elemento 3

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2
    <ul>
      <li>Elemento 2.1
        <ul>
          <li>Elemento 2.1.1</li>
          <li>Elemento 2.1.2</li>
        </ul>
      </li>
      <li>Elemento 2.2</li>
      <li>Elemento 2.3</li>
    </ul>
  </li>
  <li>Elemento 3</li>
</ul>

En el ejemplo anterior hemos anidado hasta tres niveles de listas desordenadas, pero podemos combinar tanto listas ordenadas como listas desordenadas y anidarlas a nuestro gusto o según nuestras necesidades.

Nuestra puntuación

Twittear