Listas anidadas en HTML – 1 de 2

En los últimos artículos de esta serie mostramos los tres tipos básicos de listas en HTML: ordenadas, no ordenadas y de defición. Comprendidos estos conceptos, anidar listas será una tarea realmente sencilla.

Comencemos observando el aspecto de una lista anidada.

Date cuenta de que, en un primer nivel, nos encontramos con una lista ordenada. En un segundo aparecen distintas listas no ordenadas.

Veamos cómo diseñar el conjunto.

La forma de atacar una anidación de listas es partiendo desde fuera hacia dentro. Comenzamos esquematizando el primer nivel y a él le añadimos las listas de segundo nivel.

Antes de la lista ordenada de primer nivel nos encontramos con un simple encabezado que sirve de título:

<h2>Menú</h2>

Y comienza la fiesta:

Vamos a crear la estructura de la lista ordenada exterior, pero sin rellenar los campos con los distintos elementos. Esto ayudará a que no nos perdamos en las marañas.

<ol>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ol>

Se trata de una lista con tres elementos.

Como si de un vídeo de cocina se tratase, vamos preparando las listas no ordenadas de segundo nivel para cuando llegue el momento de agregarlas al sofrito:

Esta vez la detallaremos completas, pues no hay ningún nivel inferior:

La primera:

<ul>
    <li>Macarrones</li>
    <li>Gazpacho</li>
    <li>Judías pintas</li>
</ul

Esto no tiene ningún misterio: una simple lista sin ordenar con tres elementos.

La segunda:

<ul>
    <li>Pollo al ajillo</li>
    <li>Merluza frita</li>
</ul>

Y, finalmente, la última:

<ul>
    <li>Fruta</li>
    <li>Yogur</li>
    <li>Café</li>
</ul>

Hasta aquí todo es muy sencillo. Presta atención ahora, pues llega el momento crítico.

Vamos a analizar ahora los distintos elementos que componen la lista numerada de primer nivel.

Fíjate en el primer elemento (échale un vistazo nuevamente al fichero de ejemplo) y trata de responder a la siguiente pregunta:

¿De qué está compuesto el primer elemento?

La respuesta debe llegarte de un modo inmediato si comprendes que el primer elemento se compone de todo lo que hay entre el número 1 y el número 2.

Es decir, nos encontramos, en primer lugar, con un encabezado:

<h3>Primer plato</h3>

Puesto que para el título empleamos un h2, parece lógico utilizar aquí otro de menor jerarquía como un h3.

Después del encabezado, nos aparece la primera de las listas no ordenadas de segundo nivel que ya cocinamos hace un rato:

<ul>
    <li>Macarrones</li>
    <li>Gazpacho</li>
    <li>Judías pintas</li>
</ul

Por lo tanto, el primer elemento de la lista de primer nivel es, completo:

<h3>Primer plato</h3>
<ul>
    <li>Macarrones</li>
    <li>Gazpacho</li>
    <li>Judías pintas</li>
</ul>

Razonando del mismo modo, el segundo elemento de la lista de primer nivel se compone de todo lo que hay entre el 2 y el 3. Es decir:

<h3>Segundo plato</h3>
<ul>
    <li>Pollo al ajillo</li>
    <li>Merluza frita</li>
</ul>

Finalmente, el tercer elemento es:

<h3>Postre</h3>
<ul>
    <li>Fruta</li>
    <li>Yogur</li>
    <li>Café</li>
</ul>

Ya sólo falta el toque final. Volvemos al esqueleto de la lista de primer nivel y entre cada <li>…</li> insertamos cada una de las piezas.

He aquí nuestro resultado final:

<h2>Menú</h2>
<ol>
    <li>
        <h3>Primer plato</h3>
        <ul>
            <li>Macarrones</li>
            <li>Gazpacho</li>
            <li>Judías pintas</li>
       </ul>
    </li>
    <li>
        <h3>Segundo plato</h3>
        <ul>
        <li>Pollo al ajillo</li>
        <li>Merluza frita</li>
        </ul>
    </li>
    <li>
        <h3>Postre</h3>
        <ul>
            <li>Fruta</li>
            <li>Yogur</li>
            <li>Café</li>
        </ul>
    </li>
</ol>

Ya sabes que la indentación no es necesaria, pero ayuda a esclarecer la estructura del código.

Descárgate el código fuente haciendo clic con el botón derecho sobre el enlace del comienzo del artículo si quieres ver fichero el fichero completo.

Cuando hayas practicado esto un par de veces podrás escribir directamente el código con agilidad. Tómate, entre tanto, el tiempo que haga falta desglosando cada lista de fuera a dentro, tal como hemos hecho aquí.

En el próximo artículo presentaré un nuevo ejemplo, esta vez anidando listas ordenadas entre sí. Veremos las particularidades que tienen este tipo de estructuras.

Javier Montero


Artículos relacionados:

Creación de listas ordenadas en HTML
Listas no ordenadas en HTML
Listas de definición en HTML


Listas anidadas en HTML – 1 de 2


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

4 opiniones en “Listas anidadas en HTML – 1 de 2”

  1. Hola, muchas gracias por la información, pero tengo una duda, ¿cómo hacer para que las listas anidadas aparezcan nomencladas de la forma 3.1, 3.1.1, 3.1.1…..?, Gracias.

    1. Qué tal, Daniel:
      Para lograr una lista al estilo de la que deseas necesitas aplicar CSS. No te será difícil encontrar infinidad de ejemplos en google. Por ejemplo, busca “listas anidadas CSS”.
      Las hojas de estilo CSS sólo las he mencionado de pasada en el blog. Tomo nota de tu cuestión para tratarla cuanto antes en un artículo aparte.
      Saludos

    1. Qué tal:
      “Anidar” es un término que se emplea mucho en programación. En este contexto, listas anidadas son sublistas que están dentro de una lista, como si estuvieras haciendo un esquema con varios niveles de profundidad.
      Saludos

Deja un comentario