Módulo 3

Listas

Cuando queremos mostrar varios elementos, uno debajo de otro, usamos listas: como la lista de la compra que escribes en un papel. HTML tiene dos tipos principales, y la diferencia entre ellos es muy sencilla: si el orden importa o no.

En este módulo vas a...

Crear listas con viñetas cuando el orden no importa.
Crear listas numeradas cuando el orden sí importa.
Anidar una lista dentro de otra.

Listas con viñetas: <ul>

ul significa unordered list (lista sin orden, en inglés). Se usa cuando el orden de los elementos no importa: por ejemplo, los ingredientes de una receta o las ventajas de un producto. Si cambiaras el orden de esos elementos, el significado seguiría siendo el mismo.

Cada elemento suelto de la lista (cada "línea") va dentro de una etiqueta <li> (list item, "elemento de lista"). Necesitas una pareja de <li></li> por cada elemento, todas ellas dentro de <ul></ul>.

<ul>
  <li>Aprende a tu ritmo</li>
  <li>Profesores expertos</li>
  <li>Acceso de por vida</li>
</ul>

Listas numeradas: <ol>

ol significa ordered list (lista ordenada). Úsala cuando el orden importa: los pasos de una receta, una clasificación, unas instrucciones.

<ol>
  <li>Crea tu cuenta</li>
  <li>Elige un curso</li>
  <li>Empieza a aprender</li>
</ol>

Cómo elegir

Pregúntate: si cambiara el orden de los elementos, ¿cambiaría el significado? Si la respuesta es sí, usa <ol>. Si no, usa <ul>.

Listas dentro de listas

Puedes meter una lista completa dentro de un <li> para crear sub-listas:

<ul>
  <li>Diseño
    <ul>
      <li>Ilustración</li>
      <li>Diseño gráfico</li>
    </ul>
  </li>
  <li>Fotografía</li>
</ul>

Practica: convierte este texto en listas

Convierte la primera parte en una lista con viñetas y la segunda en una lista numerada (son pasos, ¡el orden importa!).

✏️ Pruébalo tú mismo/a

Tu código HTML

Así se ve en el navegador