CSS y Semántica

Uno de los aspectos más importantes de la separación de contenido y presentación mediante el uso correcto de HTML, es la descripción semántica del contenido mediante elementos con valor propio. De este modo el contenido gana una nueva dimensión.

El uso apropiado de HTML para marcar los contenidos nos permite asignarle un valor especial a cada elemento, que lo contextualiza, le asigna jerarquía y lo describe. Un ejemplo típico es el de los títulos: el apropiado uso de h1 nos indica explícitamente que lo que está contenido en este elemento es un título de primer nivel, que la página trata sobre este tema. Luego, un h2 nos dirá que este contenido es importante, aunque no tanto como el h1. Así, prácticamente todos los elementos presentes ya en XHTML tienen un valor semántico específico.

En este contexto, CSS nos permite modificar la apariencia de cada elemento, sin necesidad de contaminar el contenido con elementos presentacionales. Esto lo hacemos mediante una serie de recursos, aunque los más comunes por el soporte existente actualmente son los siguientes:

• Selectores de elementos
• Selectores contextuales
• Selectores de ID
• Selectores de clases

La forma más pura de modificar la presentación sin alterar en lo más mínimo el HTML es a través de los selectores de elementos. Para especificar reglas para el cuerpo del documento, por ejemplo los márgenes, usaremos body { margin: 10px; }.

Los selectores contextuales nos permitirán referirnos a elementos según su ubicación o contexto. Por ejemplo, para modificar el color a los vínculos que se encuentren exclusivamente dentro de un párrafo, usaremos:p a { color: #0000FF; }

Un elemento que declare el atributo id podrá ser referenciado mediante el valor de éste. Por ejemplo, un div id="menu" será afectado por una regla como #menu { display: block; }.

Es común que utilicemos el atributo id para identificar de modo único a un elemento dentro de un documento y esto es totalmente legítimo. Pero cuando comenzamos a hablar del último recurso que mencionamos antes, el atributo class, nos acercamos a tres de los problemas más comunes al trabajar con CSS. Me refiero primero a su uso para reemplazar la función de elementos legítimos de HTML. Un ejemplo clásico es usar engendros como <p class="titulo">. Esto es un error serio porque al reemplazar la función de un elemento perfectamente legítimo, como h1, por p class="titulo", estamos perdiendo la calidad semántica inherente al elemento h1: p class="titulo" no significa nada más que esto es un párrafo, no se entiende de ningún modo que tratamos de crear un título, en consecuencia, esto afectará a los robots y a los indexadores de los buscadores como Google que no podrán comprender la supuesta estructura que acabamos de crear. Esto finalmente nos creará problemas de indexación y malos resultados en los buscadores.

El segundo problema común que se comete al usar CSS es usar clases con un valor descriptivo visual específico, como class="izquierda", class="verde" o class="grande". El error aquí se produce porque aún no se logra generar la separación mental entre contenido y presentación. Las clases deberían llamarse según la función o contenido que describen. Si por class="izquierda" nos referimos a un grupo de vínculos que mostraremos como una columna a la izquierda, como un menú de navegación contextual o secundario, entonces usemos class="menu-navegacion". El problema práctico fundamental que ocurre en estos casos es que cuando nos enfrentemos a un rediseño de la presentación del sitio, es muy posible que el elemento con class="izquierda" termine arriba, abajo o a la derecha y la clase no tenga ninguna relación con el nuevo diseño.

Finalmente, el otro problema común es la clasitis, o la utilización en exceso de clases. En muchos casos se recurre a un uso exagerado de clases cuando es perfectamente posible utilizar selectores contextuales, de elementos o una combinación de selectores que no alteren el HTML. Nuevamente es necesario recordar que CSS debería utilizarse para separar la presentación del contenido. Con el soporte actual de selectores en los browsers más utilizados (si aún no queda claro, me refiero a IE), tarde o temprano recurriremos al uso de alguna clase que con un soporte completo de CSS sería innecesario usar. Pero la idea es reducir al mínimo la intervención del HTML. Para esto, una buena planificación de la estructura de nuestros documentos es esencial.

Hemos cubierto algunos de los problemas más comunes en el uso de CSS que de un modo u otro afectan al HTML de un documento y con esto al valor semántico de sus elementos. Para quienes ya han dado el paso de asumir el uso de estándares con la combinación de HTML y CSS, espero que estos detalles contribuyan a mejorar la estructuración de los documentos con todos los beneficios que esto conlleva. Para quienes están comenzando el camino, bienvenidos, espero que esto les ayude a evitar algunos de los problemas más frecuentes.