Tarea anterior
Marcado de texto con HTML5/10
A la lista de tareas
  1. 1. Párrafos
  2. 2. Encabezados y subencabezados
  3. 3. Lista no ordenada
  4. 4. Lista ordenada
  5. 5. Lista multinivel
  6. 6. Lista de definiciones
  7. 7. Importancia: etiquetas strong y b
  8. 8. Destacar información: etiquetas em e i
  9. 9. Saltos de línea y separadores: etiquetas br y hr
  10. 10. Texto preformateado
Siguiente tarea
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • 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> <!-- agrega aquí más elementos de la lista anidada --> </ol> </li> <li>Etiquetas de lista</li> <li>Etiquetas de formularios</li> </ol> </body> </html>

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Agrega dos elementos más a la lista anidada «Etiquetas de encabezado».

    © 2023-2026, codigoheroe.com