Menu
Coddy logo textTech

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 denomina lista anidada. Es útil para crear estructuras jerárquicas, como esquemas o menús de varios niveles. 

Para crear una lista anidada, simplemente colocas 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 ambas. 

challenge icon

Desafío

Fácil

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

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

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