Estructura el código
Cuando damos el salto de maquetar con tablas a maquetar con CSS, no damos importancia a la estructura de nuestro código. Los documentos creados bajo estándares deben tener un añadido de semática, aportar mas significado.
En el nacimiento de la web, HTML fue creado como un lenguaje de marcado comprensible semánticamente. Con la llegada de la web mas gráfica, mas «de presentación» este código, antes comprensible, pasó a ser algo imposible de entender. Un cúmulo de etiquetas sin sentido. Seguro que hemos visto infinidad de veces, y lamentablemente seguimos viendo cosas como:
<table width="780" cellspacing="0" cellpadding="0" border="0"><tr><td><img src="/images/0.gif" width="1" height="1" border="0"/></td></tr><tr><td background="/images/01.gif"><img src="/images/0.gif" width="1" height="1"border="0"/></td></tr></table></code>
Vuelta a los inicios
Ahora, más que desde el nacimiento de las CSS (que ha llovido) desde la utilización mas mayoritaria de ellas, podemos volver al significado semántico de nuestro código (X)HTML, posibilitando así la separación del contenido y de su presentación en pantalla o cualquier otro dispositivo.
Si además añadimos significado a nuestros documentos (X)HTML, mediante la utilización de etiquetas del lenguaje, obtendremos beneficios en accesibilidad, en posicionamiento en buscadores, en futuras actualizaciones… y para la multitud de dispositivos futuros que puedan llegar a aparecer.
(X)HTML nos da multitud de elementos con su porpio significado:
- Cabeceras, h1, h2…
- Listas, ul, ol, dl
- fieldset, legend, label
- abbr, acronym
- cite
- caption, thead, tbody
- strong y em
Al igual que en un procesador de textos, aumentamos significado mediante listas, tablas, títulos, subtítulos… Si utilizamos los mismos elementos con significado semántico, no sólo mejorará el entendimiento de nuestro documentos (X)HTML, sino que además ahorraremos código en muchas ocasiones con las ventajas que conlleva de cara al ancho de banda, buscadores, actualizaciones…
Mas elementos: id y class
Para completar el significado disponemos de elementos que nos ayudan a incluir información estructural a nuestros documentos añadiendo atributos como id o class
Un id identifica a un elemento único en el documento y class define propiedades que pueden ser aplicadas a varios elementos. Este segundo elemento es utilizado para para identificar contenido de similares características.
Nombrar ids y class
Un error semántico a la hora de dar nombre a estos elementos es aplicar nombres relacionados con la presentación. Si nombramos a una clase cajaRoja
o menuArriba
estamos cometiendo un error de concepto. Estamos asociando la presentación con el contenido. Y además no estamos aportando nada a la estructura.
A la hora de seleccionar nombres para nuestras clases, lo mejor es añadir un poco de contenido semántico, utilizando nombres como menuPrincipal
, utilidades
, mensajeError
, contenidoPrincipal
…
Trabaja con las herencias
Cuando empezamos a maquetar con CSS, lo primero que hacemos en nuestros (X)HTML es añadir clases e ids para todos los elementos. Una forma de limpiar nuestro código es agrupar elementos dependientes, utilizar la herencia entre clases… de esta forma bajo un mismo contenedor podemos dar estilo a todo lo que contiene.
Div y span
Son dos elementos que nos ayudan a estructurar nuestro código, pero como herencia de nuestro trabajo con tablas (los que hemos maquetado con ellas) tenemos la costumbre de añadir div y span para casi todos los grupos de elementos de nuestro documento.
Muchos elementos ya tienen información semántica suficiente para que no tengamos que incluirlos dentro de una capa contenedora, elementos como las tablas, las listas…
Si añadimos el atributo id con valor menuPrincipal
a nuestra lista de opciones de menu no es necesario, además ensuciaría nuestro código, incluir esta lista dentro de un contenedor div
con el id menuPrincipal
.
Da un paso más
Si ya has dejado a un lado las tablas y trabajas con (X)HTML y CSS da un paso más y trabaja de una manera más semántica:
- Estructura tu código
- Utiliza correctamente las etiquetas que nos proporciona el sistema
- Evita el uso de divs innecesarios
- No nombres a las clases ni a los identificadores pensando en la presentación
- Agrupa elementos en tu CSS
Publicado mas o menos el 6 de abril de 2006 a las 3:15 pm por César García Gascón, archivado en las categorías CSS, Estándares y etiquetado cómo CSS. Siéntete libre de comentar un poco más abajo si quieres.