HTML semántico y CSS

html como sopa de etiquetas

HTML es un lenguaje de marcas. Hasta aquí todo el mundo de acuerdo; el problema empieza al determinar que es lo que se debe marcar, y por qué.

En origen el lenguaje HTML se creó con unos fines que ahora pueden parecer modestos: asegurar la portabilidad y legibilidad del texto entre distintos sistemas operativos, muy diferentes entre sí. El entorno científico en el cual se originó la WWW no precisaba de mayores exigencias de edición. Por eso las especificaciones iniciales HTML contienen etiquetas de lo mas heterogéneo (tag soup), siendo la finalidad de algunas estructurar el documento, mientras que otras atendían a aspectos rudimentarios de su apariencia.

Conseguida la interoperabilidad, el ambicioso paso siguiente es llegar a la web semántica, en la cual el lenguage de marcas se limitará a indicar la estructura del documento, y a proporcionar metainformación sobre su contenido, mientras que los aspectos tipográficos y de edición, su aspecto, se dejarán al cuidado de reglas de estilo, preferentemente localizadas fuera del propio documento, y que podrán variar dependiendo del medio en que dicho documento vaya a ser visualizado.

Parte del objetivo final queda gráficamente expuesto en el slogan "Write Once, Publish Everywhere" (escribe una vez, publica donde sea), puesto que un documento que contenga unicamente elementos estructurales (y esté además bien estructurado) podrá ser reutilizado sin necesidad de cambio alguno. Como ventajas adicionales, el HTML semántico permitirá, a través de la metainformación proporcionada por el documento (no visible en la pantalla) recuperar información de la web de forma mucho mas efectiva y automatizada. Los buscadores, y otras herramientas de recuperación de contenidos, podrán hacer su trabajo de manera mucho mas precisa.

XHTML no es todavía XHTML

La propia naturaleza de la red impone un periodo de transición. El lenguage XHTML es un subconjunto de XML, y por tanto debería ser enviado con el mime-type correspondiente, application/xhtml+xml, o los genéricos application/xml o text/xml. Unicamente para facilitar la transición, es posible utilizar el mime-type text/html con la versión XHTML 1.0.

Ocurre, sin embargo, que la página xhtml servida como text/html será analizada por el navegador como si fuera html, por lo que se pierde cualquier ventaja que pudiera tener este lenguaje. Y si servimos la página xhtml como application/xml, text/xml o application/xhtml+xml (posible con XHTML 1.0 y obligatorio con XHTML 1.1) veremos que el 90% de los navegadores (lease aqui, internet explorer) no es capaz de visualizar este contenido de forma correcta.

Tenemos entonces que las normas XHTML de momento no pueden ser servidas con corrección en toda su extensión; tenemos por otro lado millones de páginas web escritas en HTML de calidad semántica o estructural inexistente, pero perfectamente legibles. Este legado permite asegurar que el lenguaje HTML no va a desaparecer en un futuro inmediato, ni mediato, lo que nos lleva a la pregunta acerca de la utilidad del xhtml en este momento.

La actual situación de los navegadores web (asumimos aqui que nuestras páginas estan destinadas a ser visualizadas en ordenadores convencionales, no por pdas, ni por neveras conectadas a la red) hace que sea prácticamente indiferente escribir las páginas en xhtml 1.0 o html 4.01 estricto, por la razón expuesta de que serán todas ellas interpretadas como html, salvo que las sirvamos como xml, en cuyo caso no podrán ser vistas correctamente. Por supuesto, el lenguaje xhtml 1.0, incluso servido como html, es mas riguroso que versiones antiguas HTML, y obliga a esmerar la corrección de la página, pero el nivel de exigencia de html 4.01 estricto es muy similar.

Web semántica ahora

Con un uso correcto de HTML 4.01 y CSS podemos comenzar nuestro camino hacia la web semántica. He aqui unas pocas reglas:

  1. Los títulos no son solo títulos. Las cabeceras h1, h2... tienen un sentido jerárquico. Usadas correctamente, su sola visualización debería permitir construir un mapa exacto del documento.
  2. Los párrafos se muestran con etiquetas p de apertura y cierre. No los sustituyas con saltos de línea. Y por supuesto, no uses etiquetas   o br para crear márgenes o tabulados, o en general para controlar la situación del texto. El uso de HTML para controlar el posicionamiento está declarado en desuso. No mas center para centrar el texto.
  3. Las etiquetas i, b, u se refieren a la apariencia de la letra (italica, negrita, subrayado) y tienen sus dias contados. Si solamente quieres cambiar la apariencia de la letra, usa CSS. Si lo que quieres es destacar el texto, por su importancia, usa em o strong (enfatizado, mas enfatizado). Estas etiquetas son las adelantadas de la web semántica: mas que determinar la apariencia del texto, informan (al ordenador que trata la página, al buscador que la indexa) acerca de que es texto importante. Otras etiquetas semanticas de toda la vida podrían ser kbd, cite, code, acronym. Todas ellas contienen metainformacion acerca del texto marcado.

Lecturas adicionales