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