Autor: Javier Montero

En la primera parte de este artículo combinamos los conocimientos que ya habíamos adquirido sobre las listas para ilustrar el modo de anidarlas.

Lo primero que te propongo es que realices un ejercicio práctico. Observa la siguiente página cuidadósamente y trata de reproducir el código necesario para generarla.

No te dejes intimidar por la profundidad de la lista (hasta cuatro niveles). Recuerda que debes aproximarte de fuera a dentro, comenzando por la más exterior.

Te recomiendo que cada vez que abras una etiqueta la cierres para crearte un contenedor y asegurarte de que no se te olvida por accidente su cierre. Luego prosigue rellenando los espacios entre etiquetas.

Si tienes algún problema, haz clic sobre el enlace con el botón derecho y descárgate el fichero con el código fuente para consultar la solución.

Quiero que te fijes ahora en las listas del ejemplo. Observa que las listas ordenadas anidadas muestran una numeración ascendente con números normales (arábigos) independientemente del nivel en que se encuentren. En cambio, las listas no ordenadas presentan un bolo que dependerá precisamente del nivel de profundidad.

Observa ahora el siguiente ejemplo, en el que he alterado precisamente estos indicadores por defecto, tanto en las listas ordenadas como en las que no lo están.

Fíjate cómo, en las listas ordenadas, además de usar números arábigos para expresar el orden, podemos hacerlo de los siguientes modos:

– Letras mayúsculas
– Letras minúsculas
– Números romanos en mayúsculas
– Números romanos en minúsculas.

Además, disponemos de distintos símbolos para las listas no ordenadas.

Voy a enseñarte cómo hacer esto, pero antes tengo que contarte algo importante relacionado con el modo en que fue evolucionando el lenguaje HTML desde su creación.

En un principio el HTML era caótico. No sé si recordáis la guerra cruenta entre navegadores (sobre todo entre Netscape Navigator y Microsoft Internet Explorer) en la que cada uno añadía nuevas funcionalidades al lenguaje que dificultaban los esfuerzos de estandarización y compatibilidad.

El W3C intentó poner un poco de orden en esta situación y apostó por una versión más estricta del lenguaje inspirada en los rigores de XML, que denominó XHTML.

Además de unas normas sintácticas más severas (como la escritura de las etiquetas en mayúsculas y la necesidad de cerrarlas), introdujo un concepto decisivo: la separación entre contenido y diseño.

Tras la guerra entre navegadores nos encontramos con un buen número de etiquetas y atributos que indicaban cómo se diseñaba el texto: qué tipo de letra, tamaño, color, márgenes, etc…

Con XHTML se desligó la función semántica del lenguaje (dime qué quieres hacer) de los detalles de presentación (cómo quieres verlo). Para eso recurrió a un artilugio denominado hojas de estilo, las cuales se ocupaban de todos los aspectos concretos de visualización.

Como consecuencia XHTML realizó una purga y nombró como obsoletas aquellas etiquetas o atributos que se ocupaban de cuestiones de diseño, pues entendía que todo eso era función de las hojas de estilo. Un ejemplo, entre muchos, es la etiqueta <font>, que se ocupaba de definir el tipo de letra a utilizar.

¿Qué tiene que ver todo esto con las listas anidadas, preguntarás?

Pues bien, antes de que llegase el XHTML escricto, existía un atributo en las etiquetas <ol> y <ul> que permitía definir el tipo de numeración o bolo si no queríamos utilizar los que el navegador proponía por defecto.

XHTML estricto considera que esos atributos están obsoletos, pues insiste en que todos los aspectos de diseño deben realizarse a través de las hojas de estilo.

Pero, a pesar de que estén obsoletos, aún siguen estando activos y te explicaré cómo hacerlo a la antigua usanza hasta que empecemos los artículos de CSS (Cascading Style Sheets), las hojas de estilo con las que resolveremos todas las consideraciones de presentación y diseño de HTML.

¿Recuerdas qué era la famosa etiqueta DOCTYPE que aparece al comienzo de cada página? Compara la del primer ejemplo con la del segundo. Se trata de una DTD (definición de tipo de documento) que indica al navegador, último responsable de la presentación de la página, a qué conjunto de normas se adhiere la página.

El primer ejemplo está usando XHTML estricto con todo lo que eso implica, entre lo que está no usar ni etiquetas ni atributos obsoletos (deprecated).

El segundo usa una versión más relajada denominada Transitional, que en su día se empleó para dar tiempo a los navegadores a que poco a poco fueran migrando a XHTML puro. El XHTML transicional tiene el rigor sintáctico del XHTML, como el cierre de todas las etiquetas y su escritura en minúsculas, pero permite el uso de estas etiquetas obsoletas.

Como he querido usar atributos obsoletos para especificar cómo numeraré las listas ordenadas y qué bolos emplearé en las no ordenadas, en vez de emplear hojas de estilo CSS, he cambiado la DTD del segundo ejemplo a XHTML transicional. Fíjate bien en la primera línea.

Si no lo hubiese puesto podría obtener resultados imprevisibles según el navegador empleado.

Por lo general trabajaremos con XHTML estricto o con HTML5 (la nueva gran revolución) en esta serie, pero resulta interesante también conocer el modo clásico de proceder.

Observa el código fuente del segundo ejemplo y se desvelará el misterio. Con el atributo type dentro de las etiquetas <ol> y <ul> indicamos cómo será la numeración o el bolo:

– orden con letras mayúsculas: type=»A»
– con letras minúsculas: type=»a»
– con números romanos en mayúsculas: type=»I»
– con números romanos en minúsculas: type=»i»
– y, naturalmente, con números arábigos, type=»1″, que no es necesario indicar, pues es el valor por defecto.

Por ejemplo, para una numeración por letras minúsculas, la etiqueta sería:

<ol type="a"> ... </ol>

Con las listas no ordenadas tenemos las siguientes opciones:

– bolo cuadrado: type=»square»
– bolo con punto negro: type=»disc»
– bolo con punto en blanco: type=»circle»

Por ejemplo:

<ul type="disc"> ... </ul>

Es interesante que aprendas esto. Pero pronto te haré desaprenderlo cuando nos metamos en profundidad en el apasionante mundo de las CSS.

Javier Montero

---

Listas anidadas en HTML – 2 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

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