Listas no ordenadas

Cuando tenés un conjunto de cosas relacionadas donde el orden no importa — una lista de compras, los ingredientes de una receta, las características de un producto — HTML tiene un elemento específico para eso: la lista no ordenada.

El elemento `<ul>`

<ul> viene de unordered list (lista no ordenada). Agrupa ítems donde cambiar el orden no cambia el significado: da igual si “Pan” va antes o después de “Leche” en una lista de compras.

Cada ítem va en un elemento <li> (list item):

<ul>
  <li>Pan</li>
  <li>Leche</li>
  <li>Huevos</li>
  <li>Yerba</li>
</ul>

Pan
Leche
Huevos
Yerba

El navegador muestra cada ítem con una viñeta (•). Ese estilo lo controla CSS — lo verás en el Bloque II. Lo importante acá es otra cosa.

¿Cuándo usar `<ul>`?

Usás <ul> cuando tenés un conjunto de ítems relacionados donde el orden no importa. Si reordenás los ítems, el significado no cambia. Ejemplos típicos:

Lista de compras (da igual el orden de los productos)
Ingredientes de una receta (el orden no altera la lista en sí)
Características de un producto
Opciones de un menú de navegación (lo veremos en la lección 4)

Cuando el orden sí importa — los pasos de una receta, un ranking — usás <ol>. Eso lo ves en la lección siguiente.

La semántica importa

Podrías hacer algo que “se vea” como una lista con párrafos y guiones:

<!-- ❌ No es una lista: son párrafos con texto que empieza con guión -->
<p>- Pan</p>
<p>- Leche</p>
<p>- Huevos</p>

Visualmente puede parecerse, pero el HTML no declara ninguna estructura de lista. El navegador no sabe que esos tres párrafos forman un grupo; un lector de pantalla los lee como tres párrafos sueltos, sin anunciar “lista de 3 ítems”. Con <ul>, en cambio, el documento comunica la estructura: estos ítems forman un conjunto.

La regla clave: el único hijo directo válido es `<li>`

Esta regla aplica a todas las listas del módulo: el único hijo directo de un <ul> (y de un <ol>) es <li>. No podés poner texto suelto ni otros elementos directamente adentro de la lista.

<!-- ❌ MAL: texto suelto y un <p> como hijos directos del <ul> -->
<ul>
  Frutas:
  <li>Manzana</li>
  <p>Verduras:</p>
  <li>Zanahoria</li>
</ul>

<!-- ✅ BIEN: todo el contenido vive dentro de un <li> -->
<ul>
  <li>Manzana</li>
  <li>Zanahoria</li>
</ul>

El contenido de un <li> puede ser texto marcado u otras etiquetas dentro:

<ul>
  <li><strong>Pan</strong> integral</li>
  <li>Leche <em>descremada</em></li>
</ul>

Tu turno: el starter tiene los 5 productos en un comentario. Creá una <ul> con un <li> por cada producto (pan, leche, huevos, yerba, azúcar). La lista debe tener exactamente 5 ítems. Luego hacé clic en “Comprobar”.