Listas en HTML

¡Bienvenido a otro paso emocionante en tu camino de desarrollo web! Ya sea una lista de ingredientes de una receta, una lista de compras o un ranking de tus películas favoritas, las listas están por todas partes en internet. Ayudan a organizar la información visualmente y hacen que sea más fácil de leer. ¡Vamos a ver cómo construir estas estructuras esenciales con HTML!

El bloque base: el elemento de lista (<li>)

Piensa en una lista como un gran contenedor, y en los elementos dentro de ella como el contenido real. Antes de decidir qué tipo de contenedor usar, primero debemos saber cómo envolver cada elemento individual. En HTML, cada elemento de una lista debe estar dentro de una etiqueta <li>.

Las letras li significan "list item" (elemento de lista). Sin importar si tu lista final usa viñetas o números, cada fragmento de texto debe vivir dentro de un <li>. Es la forma universal de decirle al navegador: "Esto es un elemento específico de mi lista".

Listas desordenadas (Unordered List, <ul>)

A veces, el orden exacto de los elementos no importa. Piensa en una lista de supermercado: no importa si tomas la leche antes que las manzanas, o las manzanas antes que la leche.

Para estas situaciones flexibles, usamos una Lista desordenada (Unordered List), que se crea con la etiqueta <ul>. Cuando envuelves los elementos dentro de <ul>, el navegador muestra automáticamente viñetas (pequeños puntos negros) junto a cada elemento.

<ul>
  <li>Manzanas</li>
  <li>Leche</li>
  <li>Pan</li>
</ul>

Listas ordenadas (Ordered List, <ol>)

En otros casos, el orden sí es muy importante. Si estás escribiendo instrucciones paso a paso para hornear un pastel, o una lista de tus 10 series favoritas, la secuencia es clave.

Para esto usamos una Lista ordenada (Ordered List), que se crea con la etiqueta <ol>. En lugar de viñetas, el navegador numerará automáticamente los elementos en orden.

<ol>
  <li>Precalienta el horno.</li>
  <li>Mezcla los ingredientes.</li>
  <li>Hornea durante 30 minutos.</li>
</ol>

Anidar listas (la regla de oro)

A medida que construyas sitios más complejos, en algún momento querrás poner una lista dentro de otra lista. Por ejemplo, podrías tener un menú principal con submenú, o una lista de tareas donde una tarea grande incluye subtareas.

Aquí tienes la Regla de Oro para anidar listas (y la forma más fácil de evitar un error muy común de principiantes):

Si quieres poner una lista dentro de otra, la lista interna (tu nuevo <ul> o <ol>) DEBE ir completamente dentro de una etiqueta <li> existente.

Una lista interna no puede quedar suelta por su cuenta dentro del contenedor principal <ul> o <ol>. Debe estar contenida dentro de un elemento de lista específico.

<ul>
  <li>Limpiar la cocina</li>
  <li>Comprar alimentos
    <ul>
      <li>Huevos</li>
      <li>Queso</li>
    </ul>
  </li>
  <li>Sacar al perro</li>
</ul>

¿Ves que la lista interna <ul> de "Comprar alimentos" está completamente contenida antes de la etiqueta de cierre </li> de ese elemento? Ese es el secreto para una estructura perfecta.

Resumen

¡Ya estás listo para organizar contenido en la web! Repasemos las ideas clave:

• Etiqueta <li>: Envuelve cada elemento de la lista, siempre.
• Etiqueta <ul> (Unordered List): Se usa para listas desordenadas, donde el orden no importa, y crea viñetas automáticas.
• Etiqueta <ol> (Ordered List): Se usa para listas ordenadas, donde el orden sí importa, y crea números automáticos.
• Anidación: Las listas internas siempre deben ir dentro de una etiqueta <li> existente.