HTML correcto y accesible

3. Separación de apariencia y contenido

Pese a que el HTML no estaba pensado para definir la presentación, los diseñadores emplearon trucos para maquetar sus páginas (ponían imágenes irrelevantes para el contenido para mejorar su apariencia, usaban complejas tablas para colocar todo donde querían, etc.).

En 1996 (¡hace mucho tiempo!), el W3C (una asociación internacional que trabaja para el desarrollo de estándares web) publicó la especificación de CSS, un lenguaje pensado para definir la apariencia de lenguajes de etiquetas como el HTML.

CSS = Cascading Style Sheets (hojas de estilo en cascada).

De manera que:

• Por una parte tenemos el la estructura y el contenido (HTML).
• Por otra tenemos su apariencia, que se define mediante CSS.

Combinando HTML y CSS podemos tener un contenido semánticamente correcto con la apariencia que nosotros queramos: un título será un título, no un texto normal con la letra muy grande; una imagen será una imagen relevante, no una imagen usada solo con fines decorativos; una tabla se usará para mostrar datos tabulados, no para maquetar mi página y poner unas cosas a la izquierda y otras a la derecha (para eso están los CSS), etc.

Desarrollo web con estándares

HTML y CSS son estándares definidos por el consorcio W3C, que trabaja para promover la evolución de la web garantizando que las diferentes tecnologías funcionen bien conjuntamente. Eso nos conviene a todos; por eso vamos a desarrollar con estándares.

Ventajas de hacer las cosas así:

1. Con un código más limpio obtendremos páginas más ligeras y menores tiempos de descarga.
2. Con un código semánticamente correcto crearemos páginas con información más útil (los buscadores –como Google– no ven el diseño final, sino que leen código. Si nuestra página es toda ella una imagen muy bonita con mucha información, la imagen está ahí, pero para los buscadores es como si la información que visualmente contiene no estuviese: no estoy ayudando a crear una red de información y conocimiento. Si nuestras páginas están bien estructuradas, es más fácil que otros puedan beneficiarse de su información).
3. Con un código sintáctica y semánticamente correcto, nuestras páginas serán más accesibles.

Las 3 capas de una web

Hasta ahora hemos hablado de dos capas:

1. Estructura y contenido (HTML)
2. Apariencia (CSS)

En realidad, hay una tercera capa: el comportamiento.

• Con HTML definimos el contenido (por ejemplo, un formulario con una serie de campos).
• Con CSS, damos diseño a nuestro contenido.
• Pero podríamos ir más allá: podríamos mejorar la experiencia de usuario si le avisáramos, según escribe o cuando va a enviar el formulario, por ejemplo, de que un determinado valor introducido no es correcto. Eso se consigue utilizando JavaScript. Podemos mejorar la experiencia de usuario añadiendo comportamiento a nuestras páginas.

El esquema final (las tres capas presentes en una página web) sería el siguiente:

Lo imprescindible es el contenido. Las otras dos capas sirven para mejorar la presentación y la experiencia de usuario.

En este curso no vamos a profundizar en JavaScript, pero si alguien se anima, encontrará recursos para saber más en el último bloque de este curso: "Recursos avanzados del bloque de diseño personalizado y accesible".