Listas ordenadas

Cuando el orden de los ítems sí importa — los pasos de una receta, un ranking, una secuencia de instrucciones — usás una lista ordenada.

`<ul>` vs `<ol>`: la decisión semántica

La diferencia entre <ul> y <ol> no es visual (viñeta vs número). Es semántica: ¿cambiar el orden cambia el significado?

¿Da igual el orden? → <ul> (lista de compras, ingredientes, características)
¿El orden importa? → <ol> (pasos de una receta, ranking, instrucciones)

Si usás <ol> para algo donde el orden no importa — solo porque “querés números” — el HTML miente sobre el contenido. Eso es exactamente lo que las listas semánticas buscan evitar.

El elemento `<ol>`

<ol> viene de ordered list (lista ordenada). Estructuralmente es idéntica a <ul>: los ítems también van en <li>. El navegador los numera automáticamente:

<ol>
  <li>Hervir el agua.</li>
  <li>Agregar la pasta.</li>
  <li>Cocinar 10 minutos.</li>
  <li>Colar y servir.</li>
</ol>

Hervir el agua.
Agregar la pasta.
Cocinar 10 minutos.
Colar y servir.

Atributo `start`: empezar desde otro número

start sirve cuando la lista es la continuación de una numeración previa — por ejemplo, cuando los primeros pasos ya se mostraron antes en la página y esta lista arranca en el paso 4:

<ol start="4">
  <li>Colar la pasta.</li>
  <li>Agregar la salsa.</li>
  <li>Mezclar.</li>
  <li>Servir.</li>
</ol>

Colar la pasta.
Agregar la salsa.
Mezclar.
Servir.

Atributo `type`: cambiar el tipo de marcador

type cambia el estilo de numeración: 1 (números, el default), a/A (letras minúsculas/mayúsculas), i/I (romanos minúsculos/mayúsculos).

<!-- Letras minúsculas: útil en documentos que referencian "la opción (a)" -->
<ol type="a">
  <li>Primera opción</li>
  <li>Segunda opción</li>
</ol>

Cuándo usarlo: type es un atributo vigente de <ol>, pero conviene usarlo solo cuando el estilo de numeración tiene significado — por ejemplo, un contrato que menciona “la cláusula (a)”. Si solo querés que se vea con letras por estética, eso es CSS (Bloque II).

Nota sobre atributos legacy: el type en <ul> (para cambiar la viñeta) y el atributo compact en ambos tipos de lista son legacy/presentacionales — quedaron obsoletos en HTML5 y hoy se manejan con CSS. Si los ves en código viejo, no los copies.

Tu turno: el starter tiene los 4 pasos finales de la receta en comentarios. Creá un <ol start="4"> con un <li> por cada paso, en orden. La lista debe tener exactamente 4 pasos y arrancar en el número 4. Luego hacé clic en “Comprobar”.