Las interfaces web se componen de tres capas:
- Contenido.
- Presentación.
- Comportamiento.
Presentación y comportamiento son opcionales.
Contenido
Se trata del contenido y de su estructuración semántica: el documento HTML. Cada porción de texto deberá ser contenida en el elemento adecuado a su contexto (párrafos, listas, encabezados, etc.), o llevar la información adicional que sea necesaria (el texto alternativo en las imágenes, por ejemplo).
Aquí no se definirá absolutamente nada relacionado con la presentación: nada de configurar colores, tipografías, fondos, etc. Nada.
Si todo esto se hace correctamente se habrá dado un paso muy importante hacia la accesibilidad, y también en cuanto al posicionamiento en buscadores. El documento será legible sin necesidad de las otras dos capas.
Presentación
En esta capa se definirá el aspecto del contenido, mediante hojas de estilo CSS.
El CSS se introduce preferentemente en un archivo, o varios, separados del contenido.
Se pueden aplicar hojas de estilo para dispositivos específicos: pantalla (la más habitual), PDA, impresoras, lectores de pantalla, etc. De esta forma se podrá optimizar el aspecto de un sitio web atendiendo a las necesidades específicas de cada dispositivo.
Además hacer la capa de presentación separada de la de contenido tiene otra ventaja importante: con solo cambiar la hoja de estilo, cambia el aspecto de todo el sitio al que se aplique la misma. Un ejemplo interesante de esta ventaja es el CSS Zen Garden, donde con un mismo contenido pero con diferentes hojas de estilo se consiguen resultados muy variados.
Comportamiento
Se trata de añadir funcionalidades con algo más de complejidad, como elementos desplegables, rollovers, etc. Se hace mediante Javascript que interactue con el DOM.
El código Javascript deberá estar contenido en archivos externos, igual que las hojas de estilo en la capa anterior.
La adición de esta capa no debe impedir el correcto acceso al contenido.