> Faqs > Anidar distintos tipos de listas en HTML

Anidar distintos tipos de listas en HTML

Me preguntaba

¿qué pasaria si pongo una lista dentro de otra?

O sea, primero pongo una lista desordenada y dentro de ella pongo una lista ordenada qué pasara?

Respuestas

Lo mejor que puedes hacer para resolver tu duda es probarlo con un poco de código en tu ordenador, así prácticas! :)

De todos modos, si insertas una lista ordenada dentro de una lista desordenada en HTML, la estructura de las listas se mantiene y el navegador renderiza la lista anidada correctamente. Aquí tienes un ejemplo de cómo se vería el código HTML:

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Listas Anidadas</title>
</head>
<body>
    <ul>
        <li>Elemento A</li>
        <li>Elemento B</li>
        <li>
            Elemento C
            <ol>
                <li>Elemento 1</li>
                <li>Elemento 2</li>
                <li>Elemento 3</li>
            </ol>
        </li>
        <li>Elemento D</li>
    </ul>
</body>
</html>

Resultado Visual

(si funciona bien esta página se verá... pero como el código lo escribo en markdown para responder esta pregunta no estoy seguro...)

  • Elemento A
  • Elemento B
  • Elemento C
    1. Elemento 1
    2. Elemento 2
    3. Elemento 3
  • Elemento D

Lista Desordenada (<ul>): Es la lista principal que contiene elementos de lista (<li>).

Lista Ordenada Anidada (<ol>): Dentro de uno de los elementos de la lista desordenada (<li>), se inserta una lista ordenada (<ol>), que a su vez contiene sus propios elementos de lista (<li>).

Alberto
600 15 42 18