El blog de la informatica-Eneko Mardones

Listas en HTML

A continuación comenzaremos a explicar las listas de HTML que implican varias etiquetas para crear su estructura. Veremos varios tipos de listas que se pueden utilizar para diversos objetivos.

Las posibilidades que nos ofrece HTML en cuestión de tratamiento de texto son notables. Varios ejemplos de ello son las listas, que sirven para enumerar y definir elementos, los textos preformateados y las cabecera y/o títulos.

Las listas originalmente están pensadas para citar, numerar y definir cosas a través de características. Sin embargo, las listas finalmente se utilizan para mucho más que enumerar una serie de puntos, en realidad son un recurso muy interesante para poder maquetar elementos diversos, como barras de navegación, pestañas, etc. Pero esto lo veremos más adelante cuando apliquemos CSS a las listas.

De momento, trataremos las listas desde el punto de vista de su construcción y veremos los diferentes tipos que existen, y que podemos utilizar para resolver nuestras distintas necesidades a la hora de escribir textos en HTML.

LISTAS DESORDENADAS

Son delimitadas por las etiquetas <ul>…</ul>. Cada uno de los elementos de las listas es citado por la etiqueta <li>…</li> (<li> tiene su cierre, aunque si no lo colocas, el navegador al ver el siguiente <li>, interpretara que estas cerrando el anterior).

Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo “type” incluido dentro de la etiqueta de apertura <ul>, si queremos que el estilo sea válido para toda la lista, o dentro de la etiqueta <li> si queremos hacerlo especifico de un solo elemento.

NOTA: en algunos navegadores no funciona la opción de cambiar el tipo de viñeta a mostrar y por mucho que nos empeñemos, siempre saldrá el punto negro. En caso de que no funcione, siempre podemos construir la lista a mano con la viñeta que queramos utilizando las tablas de HTML. También es posible definir el tipo de viñeta por medio de CSS.

LISTAS ORDENADAS

Las listas ordenadas sirven también para presentar información, en diversos elementos o ítems, con la particularidad que estos estarán precedidos de un número o una letra para enumerarlos, siempre por un orden.

Para realizar las listas ordenadas, usaremos las etiquetas <ol>…<ol>. Cada elemento será igualmente indicado por la etiqueta <li>.

Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de modificar el estilo. En concreto nos es posible especificar el tipo de numeración empleado, eligiendo entre números, letras y sus mayúsculas y números romanos en minúsculas y mayúsculas.

Para realizar dicha selección hemos de utilizar, como para el caso precedente, el atributo “type”, el cual será situado dentro de la etiqueta <ol>. Los valores que puede tomar en este caso son: para ordenar por números, por letras minúsculas, por letras mayúsculas, por números romanos en minúsculas y por números romanos en mayúsculas.

NOTA: recordamos que en algunos navegadores no funciona la opción de cambiar el tipo de viñeta a mostrar.

En la lista ordenada puede que en algún caso queramos empezar nuestra numeración por un numero o letra que no tiene que ser el primero. Para solventar esta situación, podemos utilizar un segundo atributo, “start” , que tendrá como valor un número. Este número, que por defecto es “1”, corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o los números romanos, el navegador se encargara de hacer la traducción del número a la letra correspondiente.

LISTAS DE DEFINICION

Las listas de definición sirven para hacer un conjunto de elementos con pares concepto-descripción. Es decir, se especificaran varios términos por su nombre y se escribirá una definición para cada uno. Cada elemento es presentado junto con su definición, uno detrás de otro.

NOTA: este tipo de vistas no se usa mucho. Es un buen recurso, porque permite aplicar semántica a los ítems de una lista, que quedan asociados a su definición, por lo que usarlas no será una mala idea, sin embargo nadie las utiliza.

Veremos también la anidación de listas, que resultara un recurso interesante para estructurar datos un poco más complejos o enumerar elementos con una jerarquía.