Armonía | En definitiva...

Siguiendo con el tema de la semántica en las etiquetas XHTML, ahora es el turno de las etiquetas dedicadas a la marcación de listas en nuestros documentos. Estas etiquetas son ul, ol, li, dl, dt y dd, (al menos en la versión actual de XHTML, en el borrador de XHTML 2.0 hay un par de añadidos que comentaré en otra ocasión).

Siempre que nuestro documento vaya a contener una lista de cualquier tipo, deberemos marcarla con alguna de estas etiquetas. Una lista puede ser, por ejemplo, la lista de la compra, una receta de cocina, las características de un ordenador, o cualquier otra cosa que se nos ocurra.

Cuando pensemos en listas, normalmente deberemos pensar en dos elementos. En el conjunto global de la lista, y en los elementos que la forman. En el caso de las listas de definiciones, (dl), los elementos que forman la lista se dividen en dos, el título de la definición, (o símplemente "término"), (dt), y la definición en si misma, (dd), pero esto ya lo detallaré más adelante.

En principio, el uso de las listas en HTML o XHTML es muy limitado, simplemente podemos identificar la lista y marcarla, junto con sus elementos. Pero gracias a CSS las posibilidades de las listas se multiplican de forma bestial. Por ejemplo, normalmente los menus de las páginas maquetadas con tablas son simplemente celdas de alguna fila, o cualquier otra cosa de ese tipo. Esto, fuera de toda duda, es totalmente incorrecto. La forma más correcta, por ahora, de hacer menús de este tipo es usando precisamente listas. Al fin y al cabo, un menú no es más que una serie de elementos, una lista de elementos. Una vez marcado correctamente el menú, con CSS podemos hacer que aparezca como queramos. En horizontal, sin los marcadores, (bullets), con color de fondo, borde, etc.

Listas ordenadas: ol, li

El primer tipo de lista que voy a comentar es la lista ordenada. Este tipo de lista debe usarse para listas en las que el orden de los elementos es marcadamente importante. El ejemplo más habitual es una receta de cocina, (una lista de pasos a seguir para cocinar algo). En este tipo de listas se pretende destacar, además de el hecho de que se trata de una lista, el orden de aparición de los elementos.

Normalmente, los agentes de usuario renderizan este tipo de listas colocando números automáticamente y de forma ordenada para cada elemento de la lista, por lo que es totalmente innecesario colocarlos a mano:

Ejemplo incorrecto:



<ol>

	<li>1.- Primer paso</li>

	<li>2.- Segundo paso</li>

	<li>3.- Tercer paso</li>

</ol>

Ya que se mostraría así:

1. 1.- Primer paso
2. 2.- Segundo paso
3. 3.- Tercer paso

Obviamente, se podría retocar con CSS para ocultar la numeración propia del elemento ol, pero me parece una pérdida de tiempo, además de algo absurdo y una forma horrenda de usar las herramientas de las que disponemos.

Viendo este ejemplo os habreis dado cuenta de que hago uso del elemento li. Como podeis comprobar se usa para marcar los elementos que componen la lista, tanto en listas ordenadas, (ol), como en listas desordenadas, (ul), que veremos a continuación.

Para mostrar un ejemplo de un buen uso de una lista ordenada, haré una para la receta de preparación de un huevo frito, ya que es importante el orden para hacerlo:

<ol>

	<li>Verter abundante aceite de oliva en una sart&eacute;n y ponerla al fuego.</li>

	<li>Coger un huevo fresco de la nevera, cascarlo y, teniendo el aceite ya caliente en la sart&eacute;n, echarlo con cuidado.</li>

	<li>Dejar un par de minutos friendo hasta dejarlo en el punto deseado.</li>
	<li>Sacar del aceite con una espumadera y servir en un plato con un buen trozo de pan.</li>

</ol>

Lo que daría como resultado lo siguiente:

1. Verter abundante aceite de oliva en una sartén y ponerla al fuego.
2. Coger un huevo fresco de la nevera, cascarlo y, teniendo el aceite ya caliente en la sartén, echarlo con cuidado.
3. Dejar un par de minutos friendo hasta dejarlo en el punto deseado.
4. Sacar del aceite con una espumadera y servir en un plato con un buen trozo de pan.

Listas desordenadas: ul, li

Este tipo de listas, a mi entender, es el más usado de todos. Este elemento, ul, está destinado a marcar listas desordenadas, en las que solo nos interesa resaltar el hecho de que los elementos forman una lista, independientemente del orden de dichos elementos.

La manera de renderizar este tipo de listas por parte de los agentes de usuario es, normalmente, mediante un punto redondo, llamado marcador, o bullet en inglés. Aunque, como digo, esta forma no es la única, ni la por defecto en todos los agentes de usuario. Además, gracias a CSS, este marcador se puede cambiar por otros tipos, (circulo vacío, un cuadrado, una imagen que nosotros queramos, etc.), usando la propiedad list-style-type. Pero al tratamiento de listas con CSS ya hablaré en otro post de forma más amplia.

Un ejemplo muy simple, y perfectamente correcto, del uso de las listas desordenadas puede ser el marcado de una lista de la compra:

<ul>
	<li>Patatas</li>
	<li>Pimientos</li>
	<li>Lechuga</li>

	<li>Ajos</li>
	<li>Filetes de cerdo</li>

</ul>

Lo cual sería renderizado de la siguiente forma, (teniendo en cuenta los estilos que en mi blog aplico a las listas desordenadas):

• Patatas
• Pimientos
• Lechuga
• Ajos
• Filetes de cerdo

Listas de definiciones: dl, dt, dd

Para terminar, existen las llamadas listas de definiciones, que son, a mi entender, las menos usadas de todas. Sirve para marcar listas de definiciones, somo su propio nombre indica. La mejor forma de ver qué es, y cómo se usa una lista de definiciones es viendo un ejemplo:

<dl>
	<dt>Patata</dt>
	<dd>Tub&eacute;rculo de color marr&oacute;n, originario de Am&eacute;rica y muy usado para cocinar.</dd>
	<dt>Aceite</dt>

	<dd>L&iacute;quido que se obtiene a partir de la aceituna, usado comunmente para cocinar.</dd>
	<dt>T&eacute;</dt>
	<dd>Arbusto del que se obtienen las hojas de la popular infusi&oacute;n con el mismo nombre.</dd>

</dl>

La forma en la que los agentes de usuario renderizan este elemento es ligeramente diferente a la del resto de elementos de lista. Para este elemento no se dibujan marcadores, (bullets), y se mantiene un sangrado general, más pronunciado en la definición en si, (elemento dd). Podemos ver el resultado a continuación:

Patata

Tubérculo de color marrón, originario de América y muy usado para cocinar.

Aceite

Líquido que se obtiene a partir de la aceituna, usado comunmente para cocinar.

Té

Arbusto del que se obtienen las hojas de la popular infusión con el mismo nombre.

Otro uso correcto que puede darsele a este elemento es para marcar diálogos, dónde el nombre de cada participante se marcará con el elemento dt, y sus palabras con dd.

Después de muchos días sin escribir vuelvo a la carga con una pequeña revisión a los elementos blockquote y q, usados para marcar citas textuales de otras referencias en nuestros documentos XHTML, (HTML también, por supuesto).

Ambos elementos se usan para lo mismo, para marcar citas textuales, pero se diferencian entre si por el hecho de que blockquote es un elemento en bloque, y q un elemento en línea. Por tanto, blockquote se usa para citas textuales largas, usualmente varias líneas. Y q se usa para citas textuales cortas, de algunas palabras.

Los atributos más interesantes para estos dos elementos son cite y xml:lang, (lang también si estamos usando versiones anteriores a XHTML 1.1). Usando el atributo cite podemos especificar una URI con un documento que aporte información sobre la cita textual que estamos realizando. Su uso es sencillo, veamos el ejemplo que se usa en las especificaciones del W3C:

<blockquote xml:lang="en" cite="http://www.mycom.com/tolkien/twotowers.html">
<p>They went in single file, running like hounds on a strong scent,
and an eager light was in their eyes. Nearly due west the broad
swath of the marching Orcs tramped its ugly slot; the sweet grass
of Rohan had been bruised and blackened as they passed.</p>
</blockquote>

Como podemos ver, hemos citado textualmente un párrafo de Las Dos Torres de J. R. R. Tolkien. Hemos usado el atributo cite para referenciar una supuesta URI con información sobre esa parte del libro, o directamente el capítulo dónde aparece, o cualquier otra cosa referente al párrafo que hemos citado.

Si miramos bien también vemos el atributo xml:lang, para especificar que el texto está en inglés. Gracias a este atributo, los agentes de usuario, (navegadores, para que nos entendamos), deberían colocar las marcas tipográficas adecuadas para el idioma que estamos citando, ya que, por ejemplo, las marcas tipográficas para las citas no son las mismas en castellano, («»), que en ingles, (""). Pero esto no es así, aunque gracias a CSS podemos solucionarlo.

En el blog de Federico hay un excelente post informativo sobre el tema de las comillas para las citas usando CSS para conseguirlas, (el se centra en los elementos en bloque). En su artículo hay algunos enlaces que tratan lo mismo, pero centrandose en los elementos en línea, por ejemplo este artículo en el blog de Manuti.