La semántica, en una definición general, se refiere a la significación de las palabras (según la definición otorgada por el diccionario de la RAE).

Aplicada al desarrollo web, cuando hablamos de semántica nos estamos refiriendo al significado que tienen las etiquetas que ocupamos en el marcado del código —puesto de otra manera más extensa: el XHTML es un lenguaje de marcado estructural, es decir, cada elemento tiene una determinada significación en relación con su función dentro del documento, que responde a las caracerísticas del texto marcado.

De forma aún más sencilla, con un ejemplo: en XHTML existe una etiqueta llamada <em>, que (al contrario de lo que muchos piensan), no es para que el texto salga en cursivas, aunque sí produce ese resultado. El propósito de la etiqueta <em> es dar énfasis, su presentación es secundaria en relación con su función estructural; por ende, desde un punto de vista exclusivamente semántico (más bien, de la semántica del código), da absolutamente lo mismo que dicho texto se muestre en cursivas o no: puede estar con un color o un fondo distinto, con cursivas o como texto normal. Claro que eso es llevar las cosas a un extremo, puesto que la semántica del código no es lo único que debería preocuparnos: tradicionalmente, un texto en cursivas se destaca del texto que lo rodea, por lo tanto, lo enfatiza. En este caso, la presentación visual y el marcado van de la mano —sí, si me preguntan, no me creo completamente ese cuento de que es posible separar completamente presentación de contenido; es más, creo que existen elementos semánticos en la presentación.

Dejemos esto de lado y vamos a lo que promete el título de este artículo: XHTML semántico aplicado a las listas. Para ello, presentaré las etiquetas que se contemplan en XHTML 1.0 para marcar las listas de elementos, tratando de marcar bien la diferencia entre ellas.

Tipos de listas

En XHTML 1.0 (y 1.1) existen tres tipos de listas: listas desordenadas, listas ordenadas y listas de definiciones. Además existen otras etiquetas que sirven para señalar los elementos de cada una de estas listas.

La etiqueta <li>

<li> es una etiqueta común a listas ordenadas y desordenadas (no se aplica a listas de definiciones). Sirve para marcar un elemento de la lista —de ahí su denominación list item. Ejemplo de utilización:

<li>The Rolling Stones</li>
<li>Pink Floyd</li>
<li>Led Zeppelin</li>
<li>The Beatles</li>
<li>The Who</li>
<li>The Kinks</li>

Cabe hacer notar que este ejemplo no está completo, ya que toda lista de elementos debe ser marcada como ordenada o desordenada —vean más a continuación.

Listas Desordenadas

Las listas desordenadas (unordered lists) son aquellas en las que el orden de sus elementos no es relevante. Por ejemplo, una lista de cosas que hay en una habitación, si no existe algún criterio predeterminado, puede ser marcado como una lista desordenada o la lista del ejemplo anterior, si estuviésemos nombrando grupos ingleses de rock clásico. La etiqueta a utilizar es <ul>. Ejemplo de utilización:

<ul>
<li>The Kinks</li>
<li>The Rolling Stones</li>
<li>Pink Floyd</li>
<li>Led Zeppelin</li>
<li>The Beatles</li>
<li>The Who</li>
</ul>

Ahora sí tendríamos un ejemplo completo, dada la presencia del tag <ul> que señala que es una lista desordenada. La presentación típica de este tipo de listas es con “bullets” (ya sean círculos, cuadrados u otros) alrededor de sus elementos:

• The Kinks
• The Rolling Stones
• Pink Floyd
• Led Zeppelin
• The Beatles
• The Who

Listas Ordenadas

Las listas ordenadas son aquellas en las que el orden de los elementos sí importa. Éstas son las listas que clásicamente aparecen numeradas, aunque mediante CSS es posible controlar la presentación de sus elementos para que en vez de números aparezcan letras latinas, griegas, números romanos, etc.

El criterio para decidir si una lista es ordenada o desordenada depende en última instancia de quien escriba el código, pero debe hacerse en función de la semántica de los elementos. Por ejemplo, la lista anterior es correcta si alguien desea solamente nombrar grupos ingleses de rock clásico. Sin embargo, si la tarea fuera “hacer una lista de grupos ingleses de rock clásico en orden de importancia”, tendríamos que modificarla para que quede así:

<ol>
<li>The Rolling Stones</li>
<li>The Beatles</li>
<li>Pink Floyd</li>
<li>Led Zeppelin</li>
<li>The Who</li>
<li>The Kinks</li>
<ol>

lo que resulta en:

1. The Rolling Stones
2. The Beatles
3. Pink Floyd
4. Led Zeppelin
5. The Who
6. The Kinks

Porque todo el mundo sabe que los Rolling son más grandes que los Beatles… lo de Pink Floyd y Led Zeppelin es materia opinable, pero nadie me va a decir que The Kinks vale para algo más que “You Really Got Me”.

O en otro ejemplo, menos polémico, de “herramientas, según costo”

<ol>
<li>Destornillador</li>
<li>Martillo</li>
<li>Taladro eléctrico</li>
</ol>

1. Destornillador
2. Martillo
3. Taladro eléctrico

Listas de definiciones

Las listas de definiciones tienen una estructura algo distinta a las de las listas ordenadas y desordenadas, pues en este caso son tres las etiquetas que necesitamos utilizar: <dl>, <dt> y <dd>, para la lista de definiciones (definition list), término a definir (definition term) y descripción de la definición (definition description), respectivamente.

Para ilustrar su uso indicaré inmediatamente un ejemplo:

<dl>
<dt>David Gilmour</dt>
<dd>Guitarrista y vocalista de Pink Floyd</dd>
<dt>Mick Jagger</dt>
<dd>Vocalista de The Rolling Stones</dd>
<dt>Jimmy Page</dt>
<dd>Guitarrista de The Yardbirs y posteriormente Led Zeppelin</dd>
<dt>Phil Collins</dt>
<dd>Baterista y vocalista de Genesis, solista</dd>
</dl>

Lo cual tradicionalmente se presenta así:

David Gilmour

Guitarrista y vocalista de Pink Floyd

Mick Jagger

Vocalista de The Rolling Stones

Jimmy Page

Guitarrista de The Yardbirs y posteriormente Led Zeppelin

Phil Collins

Baterista y vocalista de Genesis, solista

Recapitulando

La semántica hace referencia al significado que tiene cada una de las etiquetas XHTML en relación con la función que cumplen en un documento.

Al realizar listas, este lenguaje nos ofrece tres posibilidades, cada una con su propósito: ol, ul y dl, las que nos sirven para señalar listas en las que el orden de los elementos importa, listas en las que el orden de los elementos no importa y listas de definiciones, respectivamente.