Teoría
Teoría

Listas anidadas

La lista de tareas sería más útil si también nos recordara los platos favoritos del gato. Vamos a agregar una lista anidada, o sublista, dentro de «Darle de comer al gato».

Las etiquetas <ol> y <ul> se pueden anidar unas dentro de otras para crear listas con varios niveles. No hay un límite de niveles.

Primero crea la lista del primer nivel. Luego agrega otra lista entre las etiquetas <li> y </li> de uno de sus elementos. Presta atención al cierre de las etiquetas:

<ol>
  <li>1
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li>2</li>
</ol>

Este otro ejemplo contiene un error: la sublista <ul> está entre los elementos <li>, en vez de dentro de uno de ellos:

<ol>
  <li>1</li>
  <ul>
    <li>1.1</li>
    <li>1.2</li>
  </ul>
  <li>2</li>
</ol>

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en desarrollo web</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Inicio </nav> </header> <main> <article> <h1>Día tres. Mi gato está enojado conmigo</h1> <p>Ayer, mientras navegaba por internet, volví a olvidar darle de comer a mi gato. Espero que Cupcake no se entere y siga dándome ejercicios. Voy a hacer una lista de tareas diarias.</p> <ol> <li>Darle de comer al gato  </li> <li>Regar el cactus</li> <li>Apagar la luz</li> <li>Salir a hacer pendientes</li> </ol> <p>En internet estaba buscando una clasificación de los videojuegos de 2018. No todo va a ser estudiar. Así quedaron los puestos:</p> <ol> <li>Red Dead Redemption 2</li> <li>Detroit: Become Human</li> <li>Spider-Man</li> <li>God of War</li> </ol> <p>Ahora puedo continuar mi lista de tareas.</p> <ol> <li>Preparar la comida</li> <li>Jugar God of War</li> <li>Lavar los platos</li> <li>Irme a dormir</li> </ol> <p>Ahora sí que no se me olvida.</p> </article> <aside> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; }

ObjetivosRealizado

Dentro del primer elemento de la lista, después del texto Darle de comer al gato, agrega una lista no ordenada vacía.
Agrega a la lista anidada un elemento con el texto alimento seco.
Agrega otro elemento con el texto pastelitos de pescado.
Agrega otro elemento con el texto trucha oceánica.