Menu
CoddyTech

Listas anidadas

Parte de la sección Fundamentos del Journey de HTML de Coddy. Lección 14 de 60.

Puedes colocar una lista dentro de otra. Esto se llama una lista anidada. Esto es útil para crear estructuras jerárquicas, como esquemas o menús de varios niveles. 

Para crear una lista anidada, simplemente coloca un elemento <ul> o <ol> dentro de un elemento <li> de otra lista.

Aquí tienes un ejemplo de una lista desordenada anidada:

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Subitem 2.1</li>
      <li>Subitem 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

El segundo elemento contiene una lista anidada con dos subelementos. En el navegador, se mostrará así:

  • Elemento 1
  • Elemento 2
    • Subelemento 2.1
    • Subelemento 2.2
  • Elemento 3

También puedes anidar listas ordenadas o combinar ambos tipos. 

challenge icon

Desafío

Fácil

Crea un documento HTML con una lista anidada. La lista debe verse así:

  • Frutas
    1. Manzana
    2. Plátano
    3. Naranja
  • Verduras
    • Zanahoria
    • Brócoli
    • Espinacas
  • Cereales

Pruébalo tú mismo

<!DOCTYPE html>
<html>
    <body>
        <!-- Escribe el código aquí -->
    </body>
</html>
quiz iconPonte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Fundamentos

Practica por tu cuenta: Playground de Web