Listas en HTML (IX)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Uso de las listas.-

Bien, amigos. Ya hemos visto casi todo lo que HTML y CSS nos permite hacer con las litas. Ahora es el momento de pensar qué podemos hacer nosotros con esas listas que hemos creado.

Indudablemente, el primer uso que nos viene a la cabeza es el propio de una lista, ordenada o no: presentar una serie de elementos o definiciones de forma ordenada y clara. Por ejemplo, si necesitamos crear un índice en nuestra página, podemos hacerlo con una lista en cuyos elementos introduzcamos enlaces, bien a partes de la misma página, bien a otras páginas.

Vamos a crear un índice que nos lleve a dos diferentes capítulos de este manual de listas, y para no perder honda, vamos a abrir las nuevas páginas en nuevas ventanas. El código sería:

<ol>
  <li><a href="listas_1.html" target="blank">primera página</a></li>
  <li><a href="listas_5.html" target="blank">quinta página</a></li>
</ol>

y su resultado:

1.   primera página

2.   quinta página

Pero la aplicación de las listas va mucho más allá, siendo uno de los elementos que mejor nos permiten corregir el exceso de contenido textual en una página, así como lo contrario, corregir el escaso contenido textual.

Imaginemos una página en la que nos piden meter tanta cantidad de texto que no nos queda epacio para márgenes ni aires por ningún sitio. Además, el usuario se tiene que ver abligado a usar las barras de desplazamiento para poder ver todo el contenido.

En estos casos siempre podemos buscar en el texto una parte que contenga diferentes opciones comunes, sustituyendo toda esa parte por una lista de resumen de sus contenidos.

En esta ventana tenéis un ejemplo de página sobrecargada.

Ejemplo de aligeramiento mediante la estructuración en listas.

¿Qué os parece?.

Ahora imaginemos el caso contrario: tenemos una página con muy poco texto, que se presenta vacía. Con el uso bien pensado de una o más listas podemos dividir ese texto en apartados, de forma que ocupen más espacio del que lo hacían como simples líneas.

En esta ventana tenéis un ejemplo de página con poco contenido textual

Y en esta otra la misma página reacondicionada con un par de listas. La diferencia entra ambas es obvia.

* Otro de los mejores usos que podemos darle a las listas en una página web es romper con ella la monotonía de contenidos de la misma, sobre todo en aquellas páginas cuyo contenido sea eminentemente textual.

Por su propia naturaleza, estas páginas consisten en una sucesión casi ininterrumpida de texto, que en muchas ocasiones se distribuye en sucesivas líneas de longitud excesiva, lo que origina una monotonía de presentación que puede acabar aburriendo y agobiando a nuestro visitante.

En estos casos se precisa la ruptura de dicha monotonía mediante la creación de elementos nuevos que cambien la distribución del texto. Para ello se suele usar la técnica de dividir el texto en dos o más columnas (dependiendo de la resolución de diseño, de los contenidos gráficos, etc), solución muy apropiada que además facilita la distribución del mismo en líneas de longitud adecuada, que no cansan la vista de quién las lée.

Pero hay ocasiones en que esta distribución en columnas no es viable, bien porque por propio diseño la página no lo admita, bien porque nuestro cliente no lo desée así, bien por otra de las muchas causas posibles. Es estos casos podemos aplicar las listas para el mismo fin, ya que literalmente rompen el diseño lineal del texto en líneas, produciendo un cambio en la presentación que atráe la atención del usuario y corrige la monotonía ya comentada.

Por lo tanto, las listas, si se usan bien, pueden ser la solución idónea para "dar vida" a nuestras páginas.