Como crear listas con HTML y CSS

Las listas HTML representan uno de los principales medios para presentar contenido en una página web, en este artículo estudiamos como agregarlas a nuestro código y darles un estilo adecuado, además de dar muchos ejemplos prácticos de su uso.

Cuando comenzamos a explorar las posibilidades de la maquetación de páginas web, dentro de los primeros elementos que aprendemos a manejar se encuentran las listas.

Por supuesto que la generación de listas ordenadas y no ordenadas dentro de los textos es algo frecuente, pero no es para lo único que se emplean las etiquetas ul y ol junto con los ítems de lista li.

Si el código de tu página esta dominado por párrafos e imágenes, lo más probable es que pienses que no te resultará necesario aprender sobre listas, pero las verdad es que son la mejor forma de estructurar la navegación en un sitio, por lo que es fundamental que tengas esto en tus conceptos al momento de desarrollar y diseñar tu sitio.

Existen tres tipos básicos de listas:

• Ordenadas.
• Desordenadas.
• De definición.

Dentro de estos, catalogaremos todas las listas que usaremos a lo largo de un documento XHTML.

Si bien el estilo y diseño de una lista puede ser modificado, la etiqueta utilizada para su definición en el código XHTML es lo que le dará el tipo e identificación.

Listas ordenadas y desordenadas con HTML: ol y ul

Las listas ordenadas y desordenadas son las de uso más común en el código, al analizar la estructura de ambas encontraremos que son muy similares, es simplemente su visualización la que las diferencia.

Una lista desordenada será aquella que utilizaremos cuando los elementos que estamos mostrando no necesitan llevar un orden específico, es decir simplemente son puntos los cuales pueden leerse de forma aleatoria o cuya importancia es equitativa por lo que todos los puntos de la lista son igual de relevantes.

Este es un ejemplo de una lista desordenada:

<ul>
    <li>Elemento de la lista</li>
    <li>Elemento de la lista</li>
    <li>Elemento de la lista</li>
</ul>

Por su parte en las listas ordenadas tiene mucho más relevancia la parte donde del código donde colocamos cada elemento de tipo “li”, ya que al momento de visualizarla encontraremos que se agregaron una serie de números al inicio, lo que generalmente indica al usuario que debe leerse en esa secuencia.

<ol>
    <li>Primer elemento de la lista</li>
    <li>Segundo elemento de la lista</li>
    <li>Tercer elemento de la lista</li>
</ol>

Listas anidadas en HTML: una lista dentro de otra

Los elementos de las listas pueden ser utilizados para crear estructuras más complejas, la anidación nos puede ayudar para ser más específicos y dar una mejor desglose a cada punto.

Si colocamos un elemento de tipo “ol” o “ul” dentro de otro similar obtendremos listas anidadas.

<ul>
    <li>Elemento de la lista padre</li>
    <li>
        <ul>
            <li>Elemento de la lista hija</li>
            <li>Elemento de la lista hija</li>
        <ul>
    </li>
    <li>Elemento de la lista padre</li>
    <li>Elemento de la lista padre</li>
</ul>

Listas de definición: dl

Las listas de definición son elementos totalmente distintos a los ya mencionados, quedan fuera las sentencias “ol”/”ul” y no se hace uso de la etiqueta “li” para desplegar las partes que componen la lista.

Estas listas hacen uso de un conjunto de elementos para agregar términos y descripciones para cada parte de la lista, la etiqueta “dl” para definir la lista, “dt” para definir el término y “dd” para definir la descripción del término.

<dl>
    <dt>La Webera</dt>
    <dd>Sitio Web con manuales de diseño y desarrollo web.</dd>
</dl>

La etiqueta “dt” siempre debe de ir acompañada de “dd”, sin importar cual esté primero o cuantas veces aparezca por cada punto de la lista, por lo que se pueden tener varios términos para una sola descripción o varias descripciones para un sólo término, dependiendo como deseemos el glosario.

Un ejemplo básico de uso puede ser el despliegue de una lista de sitios web a los que hagamos referencia o enlacemos, estos pueden ir acompañados por una descripción individual lo que permita la usuario identificar mejor el contenido.

Presentación de listas: entendiendo CSS

La forma en que visualizaremos las listas variará si utilizamos o no CSS.

Esto puede ser cambiado mediante la propiedad “list-style-type”, la cual nos permiten elegir la forma de los indicadores.

Generalmente tenemos cinco tipos básicos de forma entre los cuales podemos escoger:

• Círculo relleno.
• Círculo vacío.
• Cuadrado.
• Números decimales.
• Número romanos

El que sea de nuestro gusto deberá ser indicado como valor de la propiedad “list-style-type” y eso hará que cambie la visualización, hay que aclarar que también podemos utilizar el valor “none” en caso de que no queramos que se muestre ningún símbolo al inicio.

Los valores correctos para el CSS son “disc” si queremos el círculo rellno, “circle” para el círculo vacío, “square” para el cuadrado, “decimal” para los números arábigos, “lower-roman” para los números romanos en minúscula y “upper-roman” para representarlos con mayúsculas.

La forma de agregar a la declaración sería así:

ol { list-style-type: decimal; }
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }

En este ejemplo estamos aplicando los número arábigos para las listas ordenadas, los círculos rellenos para las desordenadas y los círculos vacíos para las listas desordenadas anidadas dentro de otra no ordenada.

De igual manera podemos proporcionar algún símbolo o imagen propio que queramos usar como indicador, para eso basta con utilizar la propiedad “list-style-image”:

ul { list-style-image: url(simbolo.gif); }

También podemos especificar la posición del indicador, esto con la propiedad “list-style-position”, cuyos valores pueden ser “outside” o “inside”, para determinar si el indicador del elemento se verá dentro o fuera de la caja.

En caso de que queramos utilizar todas estas propiedades en una sola sentencia contamos con “list-style” como propiedad “shorthand”, lo que nos da una sentencia como la siguiente:

ul { list-style: none url(simbolo.gif) inside; }

Listas horizontales con CSS

Existe una manera muy sencilla de mostrar los elementos de una lista de manera horizontal, basta con utilizar la propiedad “display” con el valor “inline” y listo tenemos una lista horizontal, la cual puede ser utilizada como menú de navegación y colocarse en la parte superior o inferior de nuestra página

li { display: inline; }

Ejemplos hechos con listas HTML y CSS

En esta misma página encontrarás algunos ejemplos de menús realizados con listas, y es semánticamente correcto, ya que los menús son listas de enlaces. Algunos de estos ejemplos citados son:

• Diseño de menús y submenús con CSS
• Maquetación de páginas web: crear un menu horizontal con CSS
• Menú desplegable con CSS y HTML
• Menú rollover con CSS y una sola imagen

Siguiendo los pasos indicados en estos tutoriales, podremos realizar menús de navegación empleando listas no ordenadas y sus ítems (ul y li). Pero además de estos menús, podemos realizar otras tareas empleando listas, dada la gran versatilidad de este tipo de elementos.

Podemos hacer que los ítems de una lista se comporten como elementos flotantes, como bloques o elementos de línea, mediante la utilización de las propiedades “float” y “display”, versatilidad que puede aumentarse al hacer que los ítems sean enlaces y modificar las propiedades de los mismos.

Las listas son tan útiles que, aún siendo semánticamente incorrecto, podríamos maquetar una página empleando únicamente listas.

Pero para demostrar las posibilidades que tienen las listas en la maquetación, debemos mostrar algunos ejemplos, además de los menús que ya hemos citado. En esta misma página encontrarán los siguientes ejemplos:

• Crear una galería de imágenes solo con CSS y HTML
• Simular frames (marcos) con HTML y CSS
• Como hacer fondos “elásticos” para títulos y menús
• Crear tabs o pestañas con jQuery y CSS – Estructurando el contenido de una página web
• El uso de menús en nuestro sitio web y su influencia en la navegación

Además, en los siguientes ejemplos, podremos ver otras formas de aplicar las listas en el maquetado de páginas web.

Listas o menús de varias columnas

Las listas o los menús pueden construirse siguiendo muchas formas. En el siguiente ejemplo, se han dispuestos los ítems como si se tratara de una tabla con enlaces. Para ello solo utilizaremos una lista no ordenada.

Este ejemplo puede utilizarse como forma de crear menús o calendarios.

Su implementación es muy simple, ya que los diferentes elementos li son flotantes, y su ordenamiento se debe a que la caja contenedora tiene dimensiones tales que solo permite que se ubiquen tres ítems en cada fila, ordenándose tres más en la siguiente fila.

Es importante destacar que cada ítem tiene todos los bordes negros de 1 pixel, pero como se ha dado margen de -1px arriba y a la derecha, no aparecen los bordes duplicados. Los códigos del presente ejemplo son los siguientes:

<div id="menu-a">
  <ul>
    <li><a href="#">Uno</a></li>
    <li><a href="#">Dos</a></li>
    <li><a href="#">Tres</a></li>
    <li><a href="#">Cuatro</a></li>
    <li><a href="#">Cinco</a></li>
    <li><a href="#">Seis</a></li>
    <li><a href="#">Siete</a></li>
    <li><a href="#">Ocho</a></li>
    <li><a href="#">Nueve</a></li>
  </ul>
</div>

div #menu-a {
width: 160px;
background: #ccc;
margin: 50px auto;
}

#menu-a ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu-a ul li {
float: left;
background: #ddd;
width: 150px;
height: 50px;
border: solid 1px black;
margin: -1px -1px 0 0;
}

#menu-a ul li a {
color: #777;
text-decoration: none;
font: normal 13px arial;
display: block;
line-height: 50px;
width: 50px;
text-align: center;
}

#menu-a ul li a:hover {
color: black;
background: #c4c4c4;
}

Viñetas con imágenes

Para decorar un menú o una lista, pueden emplearse imágenes de fondo de forma tal que parezcan viñetas utilizando la imagen que se desee. A continuación mostramos un ejemplo de un menú sencillo.

Este tipo de decoraciones puede utilizarse en muchas formas y para otras utilidades, además de los menús, como es el caso del ejemplo.

En los ejemplos que hemos citado con anterioridad, se emplean mucho las imágenes de fondo, no solo para lograr efectos decorativos, sino también de modo de mejorar la usabilidad de los menús, diferenciando el estado de los diferentes ítems.

Para que puedan ejercitarse y hacer las modificaciones que crean pertinentes, les dejamos los códigos del ejemplo anterior:

<div id="menu-b">
  <ul>
    <li><a href="#">ítem uno</a></li>
    <li><a href="#">ítem dos</a></li>
    <li><a href="#">ítem tres</a></li>
    <li><a href="#">ítem cuatro</a></li>
    <li><a href="#">ítem cinco</a></li>
  </ul>
</div>

div #menu-b  {
  margin: 50px auto;
  }
  
#menu-b ul {
  list-style: none;
  }
  
#menu-b ul li {
  margin: 0 10px;
  float: left;
  }
  
#menu-b ul li a {
  background: url(https://s3-eu-west-1.amazonaws.com/img-lawebera/anfergon/boton1.jpg) no-repeat left;
  font: normal 15px arial;
  color: black;
  text-decoration: none;
  padding: 5px 5px 5px 15px;
  border-bottom: solid 5px #ccc;
  }
  
#menu-b ul li a:hover {
  color: #f00;
  border-color: #f00;
  background: url(https://s3-eu-west-1.amazonaws.com/img-lawebera/anfergon/boton3.jpg) no-repeat left;
  }