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
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