Listas

HTML nos facilita tres etiquetas diferentes para diseñar listas: dos muy empleadas y una tercera menos habitual.

Listas no ordenadas

Este tipo de listas se abren con la etiqueta <ul> y se cierran con su correspondiente </ul>. El ul proviene de unsortered list (lista desordenada, en español).

Para distinguir cada elemento de la lista, emplearemos la etiqueta <li>, con su correspondiente cierre. Así una lista típica quedaría así:

<h1>Material requerido</h1>
<ul>
<li>Lápiz</li>
<li>Papel</li>
<li>Pegamento</li>
<li>Tijeras</li>
</ul>

Al insertarlo en una página web, obtendremos el resultado de la figura:

Cada <li> puede contener todo lo que se nos antoje, desde párrafos completos hasta imágenes, vídeos o cualquier otro elemento.

Listas ordenadas

El segundo tipo es similar al anterior, pero cambiando el <ul> por un <ol>, es decir ordered list (lista ordenada). Así conseguiremos que los puntos se numeren.

<h1>Forma de empleo</h1>
<ol>
<li>Dibujamos las figuras con el lápiz.</li>
<li>Usando las tijeras iremos recortando las figuras cuidadosamente.</li>
<li>Por último, pegaremos cada parte por las partes indicadas.</li>
</ol>

El resultado se muestra en la figura:

Listas de definiciones

El tercer tipo, menos habitual, se utiliza para diseñar listas de términos y descripciones asociadas a ellos. La etiqueta <dl> (definition list) abre y cierra la lista, la etiqueta <dt> (definition term) se usa para especificar el término y <dd> (definition description) para describirlo. Todas ellas acompañadas de sus cierres.

<h1>Utilidad de cada elemento</h1>
<dl>

<dt>Lápiz</dt>
<dd>Se emplea para plasmar los diseños sobre el papel</dd>

<dt>Papel</dt>
<dd>Una vez dibujado será recortado y posteriormente pegado</dd>

<dt>Pegamento</dt>
<dd>Utilizaremos sus peculiares características para dar forma al objeto uniendo las partes de papel</dd>

</dl>

Al mostrarse en un navegador, las definiciones aparecen desplazadas respecto a los términos, como se recoge en la figura:

Modificación de la apariencia de una lista

Las listas pueden ser transformadas para que se ajusten a la apariencia que queramos dar a nuestra página. En la versión actual de HTML todo el formato se realiza mediante estilos: desde cambiar la distancia respecto al margen, hasta modificar la forma de numerar las listas.

Sin entrar en los aspectos estéticos que ya hemos visto o los que analizaremos más adelante, contamos con una categoría denominada Listas, con algunas opciones específicas de las listas:

• Tipo: es la opción de estilos denominada list-style-type y, dependiendo del valor asignado, se modificará la apariencia de la viñeta de la lista o el tipo de numeración, si es una lista ordenada. Podemos aplicarlo a la lista completa o a algunos elementos concretos, como hemos hecho en la lista de la figura siguiente.

• Posición: la opción list-style-position tiene dos valores, inside y outside, que harán que los elementos de la lista salgan hacia dentro o hacia fuera.
• Imagen: el valor list-style-image se emplea para definir una imagen como viñeta.