Teoría
Teoría

Lista multinivel

Crear una lista multinivel es bastante sencillo.

Primero se crea la lista del primer nivel y luego, dentro de cualquiera de sus elementos, entre las etiquetas <li> y </li>, se agrega una lista del segundo nivel. Eso sí: hay que cerrar todas las etiquetas con cuidado.

Ejemplo de código correcto:

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

Ejemplo de código con error:

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

En el ejemplo incorrecto, la lista anidada quedó colocada entre dos elementos, en vez de ir dentro de uno de ellos. Esa estructura no es válida.

La cantidad de niveles en una lista no está limitada. En una lista multinivel se pueden combinar tanto listas ordenadas como no ordenadas.

En este ejercicio vamos a practicar con ese tipo de estructura.

index.html

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lista multinivel</title> </head> <body> <h1>Secciones del curso</h1> <ol> <li> Etiquetas de encabezado <ol> <li>h1</li> <li>h2</li>  </ol> </li> <li>Etiquetas de lista</li> <li>Etiquetas de formularios</li> </ol> </body> </html>

ObjetivosRealizado

Agrega dos elementos más a la lista anidada «Etiquetas de encabezado».