Listas

Organiza información con listas ordenadas, no ordenadas y anidadas.

📖

Teoría

Las listas son fundamentales para organizar información en la web. HTML tiene dos tipos principales:

<ul> (Unordered List) → Lista con viñetas, para ítems sin orden específico

<ol> (Ordered List) → Lista numerada, para pasos o secuencias

<li> (List Item) → Cada elemento de cualquier lista

Las listas pueden anidarse: una lista dentro de otra.

html

<!-- Lista no ordenada (viñetas) -->
<ul>
  <li>Manzanas</li>
  <li>Bananas</li>
  <li>Naranjas</li>
</ul>

<!-- Lista ordenada (números) -->
<ol>
  <li>Abre el editor de código</li>
  <li>Escribe tu HTML</li>
  <li>Guarda el archivo</li>
  <li>Abre en el navegador</li>
</ol>

<!-- Listas anidadas -->
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

💡Listas en navegación

Los menús de navegación en sitios web profesionales se construyen con <nav><ul><li><a>. Aunque visualmente parezcan botones, la estructura semántica correcta usa listas.

⚡

Ejercicio práctico

🎯 Tu misión

Crea el menú de un restaurante usando listas. Debe tener secciones (Entradas, Platos Principales, Postres) y dentro de cada sección una lista de platillos con sus ingredientes principales (lista anidada).

Vista previa

←Capítulo anterior

Siguiente capítulo→