MÓDULO 1: FUNDAMENTOS

Listas (UL, OL, DL)

Las listas son esenciales para organizar información en tu sitio web. HTML ofrece tres tipos: no ordenadas (ul), ordenadas (ol), y de definición (dl).

1. Listas no ordenadas: <ul>

Usa <ul> cuando el orden de los elementos no importa. Cada elemento va dentro de una etiqueta <li>.

<ul>
  <li>Manzana</li>
  <li>Banana</li>
  <li>Naranja</li>
</ul>

Resultado visual:

  • Manzana
  • Banana
  • Naranja

2. Listas ordenadas: <ol>

Usa <ol> cuando el orden sí importa. Los elementos también van dentro de <li>, pero se numeran automáticamente.

<ol>
  <li>Primero</li>
  <li>Segundo</li>
  <li>Tercero</li>
</ol>

Resultado visual:

  1. Primero
  2. Segundo
  3. Tercero

3. Listas de definición: <dl>

Perfectas para diccionarios, glosarios o descripciones. Usa <dt> para el término y <dd> para la definición.

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado para crear páginas web.</dd>

  <dt>CSS</dt>
  <dd>Lenguaje para dar estilo a las páginas web.</dd>
</dl>

Resultado visual:

HTML
Lenguaje de marcado para crear páginas web.
CSS
Lenguaje para dar estilo a las páginas web.

4. Listas anidadas

Puedes anidar listas dentro de otras para crear estructuras más complejas.

<ul>
  <li>Frutas</li>
  <li>Verduras
    <ul>
      <li>Zanahoria</li>
      <li>Espinaca</li>
    </ul>
  </li>
</ul>

Resultado visual:

  • Frutas
  • Verduras
    • Zanahoria
    • Espinaca

🛠️ Tu Misión

  1. En tu index.html, crea una lista no ordenada con 3 elementos de tu elección.
  2. Añade una lista ordenada con 3 pasos de una receta o proceso.
  3. Inserta una lista de definición con 2 términos y sus definiciones.
  4. Bonus: Anida una lista dentro de otra para mostrar una estructura jerárquica (ej: menú de navegación).
← Lección Anterior Siguiente Lección →