Anidar listas y menús

Las listas no tienen que ser planas. Una lista puede contener otra lista adentro — eso se llama lista anidada — y es la forma correcta de representar jerarquías: categorías con subcategorías, un índice con subsecciones.

---

La regla de oro del anidado

La sublista va dentro de un <li>, nunca suelta entre los <li>. Recordás la regla de la primera lección: el único hijo directo válido de <ul>/<ol> es <li>. Una <ul> suelta como hija directa de otra <ul> viola esa regla.

<!-- ❌ MAL: la sublista suelta, como hija directa del <ul> exterior -->
<ul>
  <li>Frutas</li>
  <ul>
    <li>Manzana</li>
    <li>Banana</li>
  </ul>
</ul>

<!-- ✅ BIEN: la sublista vive DENTRO del <li> al que pertenece -->
<ul>
  <li>Frutas
    <ul>
      <li>Manzana</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Verduras
    <ul>
      <li>Zanahoria</li>
      <li>Espinaca</li>
    </ul>
  </li>
</ul>

Podés anidar cualquier tipo dentro de cualquier tipo: una <ul> dentro de un <li> de un <ol>, una <ol> dentro de un <li> de una <ul>. La elección de cada nivel sigue la misma regla semántica: ¿importa el orden en ese nivel?

---

Un menú de navegación es una <ul>

Este es el uso menos obvio de las listas: cuando ves la barra de navegación de un sitio (Inicio · Productos · Contacto), aunque se vea como una fila horizontal de botones, semánticamente es una lista de enlaces. Es un conjunto de ítems del mismo rango, sin orden inherente entre ellos — exactamente lo que describe una <ul>.

<!-- Un menú de navegación es, por debajo, una lista de enlaces -->
<ul>
  <li><a href="...">Inicio</a></li>
  <li><a href="...">Productos</a></li>
  <li><a href="...">Contacto</a></li>
</ul>

Por qué importa: un lector de pantalla anuncia “lista, 3 ítems” y permite saltar entre ellos. Eso le da al usuario una idea de cuántas opciones de navegación hay antes de recorrerlas. Una fila de enlaces sueltos no comunica esa estructura.

Que visualmente parezca una barra horizontal y no una lista con viñetas es trabajo de CSS — lo verás en el Bloque II. La semántica sigue siendo una lista.

El elemento <a> (el enlace en sí) se enseña en CAT-06. Acá solo importa la estructura de lista que lo contiene. Y el contenedor <nav> que suele envolver el menú se ve en CAT-08.

Si el menú tiene submenús, se usa exactamente lo que acabás de aprender: una lista anidada dentro del <li> del ítem padre.

---

Tu turno: el starter tiene la estructura de categorías y productos en comentarios. Creá una <ul> raíz con exactamente 2 <li> (Frutas y Verduras). Dentro de cada <li>, agregá una sublista con exactamente 2 productos. La sublista va dentro del <li> de su categoría. Luego hacé clic en “Comprobar”.