Listas HTML: ul y ol - Paso a paso!

Nivel: Intro · HTML · Después de enlaces e imágenes · 12 minutos

Respuesta corta: usa <ul> (no ordenada) cuando el orden no importa (compras, ingredientes sueltos) y <ol> (ordenada) cuando la secuencia sí importa (pasos de una receta, ranking). Cada ítem va en <li>. No fingas listas con guiones dentro de un párrafo.

Las listas dan estructura: el navegador, el lector de pantalla y tú reconocen «esto es un conjunto de ítems». Aquí la diferencia, ejemplos y ejercicios con solución.

Lista de compras con casillas y marcas de verificación amarillas — Lista de compras: el orden da igual → ul + li.

ul vs ol (con código)

Etiqueta	Marcas por defecto	Cuándo
`<ul>`	Viñetas	Conjunto sin orden obligatorio
`<ol>`	Números	Secuencia, pasos, ranking
`<li>`	—	Cada elemento de la lista

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

<ol>
  <li>Mezcla los secos</li>
  <li>Añade la leche</li>
  <li>Cocina a fuego medio</li>
</ol>

Tres tarjetas numeradas 1 2 3 como pasos de una receta — Pasos de receta: el orden importa → ol + li.

Anidar y combinar (idea)

Puedes poner una lista dentro de un li (sublista). Mantén la indentación clara en el código para no perderte con los cierres.

<ul>
  <li>Frutas
    <ul>
      <li>Manzana</li>
      <li>Plátano</li>
    </ul>
  </li>
  <li>Verduras</li>
</ul>

Estudiante compara en una pizarra viñetas frente a números — Pregunta clave: ¿si reordeno los ítems, cambia el significado? Si sí → ol.

Ejercicios con solución

1. Lista de materiales de un experimento (sin orden). ¿ul u ol?

ul.

2. Instrucciones para instalar un programa. ¿ul u ol?

ol.

3. ¿Puede un li contener un enlace <a>?

Sí: <li><a href="...">Texto</a></li>.

4. Reescribe: «1. Abrir 2. Guardar 3. Cerrar» en HTML.

Un ol con tres li.

5. ¿Es correcto usar <br>- ítem<br>- ítem?

No: usa lista real; semántica y accesibilidad mejores.

6. Top 3 películas favoritas. ¿ul u ol?

ol (hay ranking).

Errores frecuentes

Olvidar </ul> o </ol>.
Poner texto suelto entre ul y el primer li (inválido).
Usar ol solo porque «se ve con números» cuando el orden no importa — elige por significado.

Para seguir: tablas HTML simples — cuando los datos tienen filas y columnas.