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.
Desafío
FácilCrea un documento HTML con una lista anidada. La lista debería verse así:
- Frutas
- Manzana
- Plátano
- Naranja
- Verduras
- Zanahoria
- Brócoli
- Espinaca
- Granos
Pruébalo tú mismo
<!DOCTYPE html>
<html>
<body>
<!-- Escribe el código aquí -->
</body>
</html>Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentos
1Fundamentos de HTML
¿Qué es HTML?Estructura básica de HTMLEtiquetas y elementosAnidamiento y cierre de etiquetasComentarios en HTML4Tarjeta de receta
Descripción general del proyectoTítulo y descripción de la receta2Texto y formato
EncabezadosPárrafosSaltos de líneaTexto en negrita y cursivaNegrita y cursiva de nuevoResumen - Formato9Formularios e Inputs Parte 2
Radio buttonsCheckboxesDropdownsBotonesBotones en formulariosRepaso - Formularios #1Repaso - Formularios #2Practica por tu cuenta: Playground de Web