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.
Desafío
FácilCrea un documento HTML con una lista anidada. La lista debe verse así:
- Frutas
- Manzana
- Plátano
- Naranja
- Verduras
- Zanahoria
- Brócoli
- Espinacas
- Cereales
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