Listas anidadas
Parte de la sección Fundamentals 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 <i><li></i> 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 mezclar ambas.
Desafío
FácilCrea un documento HTML con una lista anidada. La lista debe verse así:
- Fruits
- Apple
- Banana
- Orange
- Vegetables
- Carrot
- Broccoli
- Spinach
- Grains
Hoja de referencia
Una lista anidada se crea colocando un elemento <ul> o <ol> dentro de un elemento <li> de otra lista:
<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>Puedes anidar listas ordenadas o mezclar listas ordenadas y no ordenadas entre sí.
Pruébalo tú mismo
<!DOCTYPE html>
<html>
<body>
<!-- Escribe código aquí -->
</body>
</html>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentals
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 receta
IngredientesPasos2Texto 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 #2