HTML: Listas

HTML ofrece tres elementos para definir listas de información: listas ordenadas (elemento <ol>), listas no ordenadas (elemento <ul>) y listas de definición (elemento <dl>). Estos tres elementos tienen etiqueta de apertura y de cierre. Son elementos de bloque y deben contener como mínimo un elemento de lista, que en el caso de las ordenadas y no ordenadas será el elemento <li>, y en el caso de las de definición serán los elementos <dt> y <dd>.

El elemento <li> permite definir cada uno de los elementos que forman la lista. Este elemento también tiene dos etiquetas: <li> (de apertura) y </li> (de cierre). Se trata de un elemento de bloque, de tal manera que el siguiente elemento aparecerá situado visualmente debajo del anterior, quedando alineados en vertical.

Las listas se utilizan para agrupar determinadas palabras o frases que tengan alguna relación entre sí. Se pueden utilizar, por ejemplo, para crear un menú de navegación, para definir una lista de ingredientes de una receta o para especificar una tabla de contenidos al principio de un artículo. Además, las listas se pueden anidar tantas veces como sea necesario.

Ejemplo de código HTML de una lista:

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

Dando como resultado:

HTML
CSS

Listas ordenadas: elemento <ol>

El elemento <ol> (Ordered List) permite crear listas o viñetas ordenadas, y se pueden ordenar de forma numérica o alfabéticamente. Los elementos de la lista deben ir dentro de las etiquetas <ol> (de apertura) y </ol> (de cierre). Por cada nuevo elemento, el número o la letra incrementarán sucesivamente.

Ejemplo de código HTML de lista ordenada:

<ol type='a'>
  <li>Objeto uno</li>
  <li>Objeto dos</li>
  <li>Objeto tres</li>
</ol>

Resultado:

Objeto uno
Objeto dos
Objeto tres

El atributo ‘type’ en listas ordenadas

Para especificar el tipo de ordenación que debe seguir la lista se utiliza el atributo type. El valor por defecto de este atributo es el número 1. Se puede cambiar la nomenclatura modificando el valor según la lista siguiente:

1: Valor por defecto. Usa números decimales: 1, 2, 3, 4.
a: Usa letras minúsculas ordenadas alfabéticamente: a, b, c, d.
A: Usa letras mayúsculas ordenadas alfabéticamente: A, B, C, D.
i: Usa números romanos en minúsculas: i, ii, iii, iv, v, vi.
I: Usa números romanos en mayúsculas: I, II, III, IV, V, VI.

El atributo ‘start’

Si se necesita especificar que la lista ordenada empiece por otro valor que no sea el primero, se puede hacer mediante el atributo start. El valor de este atributo será la posición numérica con el que queremos que comience la lista.

Ejemplo de código HTML de lista empezando con el número romano 3:

<ol type='I' start='3'>
  <li>Empieza con el número romano III.</li>
  <li>Sigue con el número romano IV.</li>
</ol>

Se visualiza así:

Empieza con el número romano III.
Sigue con el número romano IV.

El atributo ‘reversed’

Con el atributo reversed es posible invertir el orden de una lista ordenada. Se trata de un atributo binario; esto significa que no requiere valor: con su inclusión en el elemento se invierte el orden de la lista.

Ejemplo de código HTML de lista ordenada e invertida:

<ol type='a' reversed>
  <li>Objeto 1</li>
  <li>Objeto 2</li>
  <li>Objeto 3</li>
</ol>

Resultado de una lista invertida:

Objeto 1
Objeto 2
Objeto 3

Listas no ordenadas: elemento <ul>

El elemento <ul> (Unordered List) permite definir listas no ordenadas. En lugar de letras y números aparecen discos, círculos y cuadrados, dependiendo de cuantas listas tengamos anidadas; por cada nivel, el símbolo irá cambiando para diferenciarse del nivel superior. El símbolo por defecto es el disco (disc).

Ejemplo de código HTML de lista no ordenada:

<ul type='square'>
  <li>Objeto uno</li>
  <li>Objeto dos</li>
  <li>Objeto tres</li>
</ul>

Resultado:

Objeto uno
Objeto dos
Objeto tres

Ejemplo de código HTML de tres listas anidadas:

<ul>
  <li>Elemento 1.1</li>
  <li>Elemento 1.2
    <ul>
      <li>Elemento 2.1</li>
      <li>Elemento 2.2
        <ul>
          <li>Elemento 3.1</li>
          <li>Elemento 3.2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Da como resultado:

Elemento 1.1
Elemento 1.2
Elemento 2.1
Elemento 2.2
Elemento 3.1
Elemento 3.2

El atributo ‘type’ en listas no ordenadas

En este caso, el atributo type permite especificar la apariencia del listado. De esta manera se puede cambiar el símbolo con el que comienza cada elemento. Los valores pueden ser disc, circle y square, dando como resultado una lista que empieza con un disco, un círculo y un cuadrado respectivamente.

Listas de definición: elemento <dl>

El elemento <dl> (Definition List) permite definir listas de definición o descriptivas. En este tipo de listas, se agrupan los elementos como si se tratara de entradas de un diccionario o una enciclopedia. En esas listas se especifica un término y una descripción mediante otros dos elementos HTML: <dt> y <dd>, usados para especificar el término y la descripción, respectivamente.

Estos tres elementos tienen etiqueta de apertura y cierre. Los elementos <dt>, de término, y <dd>, de definición, deben ir dentro de las etiquetas <dl> (de apertura) y </dl> (de cierre) de la lista. Por su parte, el término debe ir entre las etiquetas <dt> (de apertura) y </dt> (de cierre); mientras que la definición debe ir entre las etiquetas <dd> (de apertura) y </dd> (de cierre).

En resumen:

<dl>: Para definir la lista de definición
<dt>: Para definir el término
<dd>: Para definir la descripción

Ejemplo de código HTML de lista de definición:

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcas</dd>
  <dt>CSS</dt>
  <dd>Hojas de estilo en cascada</dd>
</dl>

Este es el resultado:

HTML
Lenguaje de marcas
CSS
Hojas de estilo en cascada