Piensa en la última vez que fuiste al supermercado sin lista. Probablemente volviste a casa con tres tipos de galletas y sin el pan que necesitabas.
Las listas son una de las formas más antiguas de organizar información — y en la web, son igual de útiles. Recetas, pasos a seguir, menús de navegación, características de un producto... las listas están por todas partes.
HTML te ofrece dos sabores: ordenadas y no ordenadas. La diferencia es exactamente lo que imaginas.
Imagina que escribes una receta. No puedes "hornear el pastel" antes de "mezclar los ingredientes". El orden es parte del significado.
Para esto existe <ol> (ordered list):
El navegador automáticamente numera cada elemento. 1, 2, 3, 4... No necesitas escribir los números tú mismo — HTML se encarga.
¿Y qué es <li>? Viene de "list item" — cada elemento individual de la lista.
Tanto las listas ordenadas como las no ordenadas usan <li> para sus elementos.
A veces el orden simplemente no importa. Tus hobbies, los países que quieres visitar, las características de un producto — no hay primero ni último, solo un grupo de cosas relacionadas.
Para esto existe <ul> (unordered list):
En lugar de números, verás viñetas (•). El navegador te está diciendo: "Estos elementos van juntos, pero ninguno es más importante que otro".
Aquí es donde las cosas se ponen interesantes. ¿Qué pasa si un elemento de tu lista tiene su propia lista?
Imagina un índice de un libro, o las categorías de una tienda online. Necesitas listas anidadas.
Observa cómo la lista interior vive dentro del <li>, no después de él.
Es una lista que pertenece a ese elemento específico.
Nada te impide mezclar listas ordenadas y no ordenadas. A veces tiene todo el sentido del mundo:
El paso 1 tiene orden (es el primer paso), pero los ingredientes dentro no lo tienen — puedes sacar la harina antes que los huevos, no importa.
¿Sabías que casi todos los menús de navegación que ves en internet son listas?
Esos enlaces horizontales en la parte superior de las páginas... son <ul> disfrazados con CSS.
Semánticamente tiene sentido: un menú es una lista de opciones. HTML te da la estructura, CSS le da la apariencia.
Crea una lista de tus tres películas o series favoritas usando <ol>
(porque claramente tienes un ranking). Dentro de al menos una de ellas,
añade una lista <ul> con las razones por las que te gusta.
Organizar es el primer paso para crear...