Listas en html

Empiezas ya a tener una idea mejor estructurada de cómo funciona el lenguaje html. Has aprendido su estructura, has conocido algunas de sus etiquetas y atributos y te sientes listo para comenzar. Aquí estamos: escribe una página simple en html.
Supongamos que, para empezar a planificar tu primera página html, has pensado en crear un blog de cocina.
Ha añadido tu título usando una etiqueta h1, has formateado tu texto y ahora deseas añadir los ingredientes de tu receta favorita: ¡necesitas una lista html! ¿Pero como hacerlo?

Las listas html, son sumamente útiles: rompen el “muro de texto” que aparece frente al lector, alivianando la lectura y animándolo así a continuar. También ayudan a transmitir mejor un mensaje que contiene información general, porque permiten que estos se presenten claramente a nivel visual.

En lenguaje html, hay 3 tipos de listas, y todas funcionan de la misma manera: tienen una etiqueta principal dentro de la cual se anidan las etiquetas secundarias.

La etiqueta principal representa el tipo de lista, las etiquetas dentro de ella son los elementos de la lista.

Vamos a verlos mejor individualmente.

Listas ordenadas

Se abren con la etiqueta <ol> (lista ordenada) que, una vez terminada nuestra lista, se cerrará (como ocurrirá con todas las demás etiquetas relacionadas con las listas). Esto crea una lista numerada progresivamente (1,2,3...).

Los elementos de nuestra lista englobados por la etiqueta <ol> se insertarán, a su vez, dentro de la etiqueta <li> </li> (o elemento de lista).

Las listas pueden contener otras listas, ramificando su estructura.
Para ser claros, un elemento de la lista puede abrir otra sublista.
Sin embargo, dado que se trata de una lista numerada, para superar la confusión que se crearía entre listas y sublistas, el atributo type viene en nuestra ayuda.

El atributo type nos permite definir cómo se llevará a cabo nuestra "numeración": puede, de hecho, hacer uso de números arábigos y romanos, o incluso letras mayúsculas o minúsculas.

La numeración con números arábigos es el valor por defecto que tenemos en las listas ordenadas.
Para utilizar el número romano uno, el valor que se le dará al atributo tipo será "type= "I" ";

Para ordenar, en cambio, los elementos de nuestra lista usando el alfabeto, el valor del atributo tipo será "type ="a" " o "type ="A" " dependiendo de si desea un indicador en minúsculas o en mayúsculas.

Veamos en la foto de abajo cómo debe verse el código:

¿Todo claro? Ahora, si necesitas comenzar tu numeración desde un cierto valor, debes usar otro atributo de la etiqueta <ol>: el atributo de inicio.
Para el mismo propósito, otra forma sería usar el atributo de valor de la etiqueta <li>.

Intentemos entenderlo mejor con la siguiente imagen:

Como puedes ver, la numeración de nuestra lista comienza desde el valor asignado al atributo de inicio (en este caso 12) y continúa; del mismo modo, con el atributo de valor se interrumpe la consecuencia natural de los números y se sigue una progresión a partir del nuevo valor (25,26...)

Listas desordenadas

Se abren con la etiqueta <ul> (lista desordenada); la diferencia es que, en lugar de la numeración que tenemos en el caso anterior, tendremos el punto. Por tanto, ya no será una lista numerada, sino una clásica lista con viñetas.

También para este tipo de lista, las etiquetas secundarias son los elementos de la lista (<li> </li>) y se pueden bifurcar, esta vez sin necesidad del atributo type, ya que el navegador predeterminado formateará los puntos que preceden a los elementos de forma diferente. 

Listas de definición

Se abren con la etiqueta <dl> (lista de definiciones) que a su vez se bifurca (en lugar de en <li> como en los casos anteriores) en <dt> (término de definición) que indica el término a definir y <dd> (definición descripción) que es literalmente la descripción de ese término.

Sería el tipo de lista útil, por ejemplo, para formatear el menú de un restaurante:

Ahora tienes hambre, eh?

Pero este no es el único tipo de menú para el que nuestras listas resultan útiles: usaremos una lista, de hecho, también para el menú html, es decir, el que el usuario consultará al expandir su barra de navegación.