Cuando organizamos información en una página web, a veces necesitamos presentar conjuntos de elementos relacionados. Por ejemplo, si estuvieras escribiendo una lista de compras, podrías hacerlo así:
- Leche
- Pan
- Agua
También podrías escribirlo como párrafos separados:
Leche
Pan
Agua
Pero de esta forma, parecería que son frases sin conexión. Para estructurar mejor la información, HTML nos ofrece las listas, que nos permiten agrupar elementos de manera más clara y organizada.
Tipos de listas en HTML
En HTML, hay dos tipos principales de listas:
- Listas desordenadas (
<ul>): se usan cuando el orden de los elementos no importa. - Listas ordenadas (
<ol>): se usan cuando los elementos siguen una secuencia lógica.
Dentro de estas listas, cada ítem se marca con <li> (de list item, que significa elemento de lista).
La estructura general es la siguiente:
<tipo_de_lista> <!-- Puede ser <ul> o <ol> -->
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</tipo_de_lista>
Ahora, veamos cada tipo de lista con más detalle.
Listas desordenadas (<ul>)
<ul> y muestran los elementos con viñetas (●, ■, etc.). Se usan para listas donde el orden no es importante, como:
- Listas de compras
- Menús de navegación
- Conjuntos de características
Por ejemplo, tu lista de compras en HTML se vería así:
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Listas ordenadas (<ol>)
<ol>, que en lugar de viñetas, muestra números para cada ítem.
Ejemplos donde usarías listas ordenadas:
- Pasos de una receta
- Instrucciones para un proceso
- Clasificaciones o rankings
Por ejemplo, los pasos para hacer un sándwich:
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Resumen
- En HTML, se usan listas para organizar elementos relacionados.
- Hay dos tipos principales de listas:
- Desordenadas (
<ul>) → se usan cuando el orden no es importante. - Ordenadas (
<ol>) → se usan cuando el orden sí importa.
- Desordenadas (
- Cada elemento de lista se escribe dentro de un
<li>.
