Etiquetas semánticas de HTML5 y compatibilidad

  • Por
Navegadores como Internet Explorer principalmente, no son compatibles con las etiquetas semánticas del HTML5. Qué podemos hacer para aumentar la compatibilidad con los elementos estructurales.
Las etiquetas que han sido incorporadas en el HTML5 alteran la manera en la que se maqueta un sitio web, aportando metadatos semánticos que nos indican qué son y qué función realizan en el documento HTML completo. Son un gran avance para lo que se llama la Web Semántica y permiten que los sitios web se puedan analizar correctamente por sistemas informáticos automatizados, como los robots indexadores.

Debido a las ventajas que hoy ofrecen, y a la recomendación de uso que grandes empresas como Google fomentan, conviene tenerlas en cuenta a la hora de generar el código de las páginas de un sitio. Ahora bien, ¿Qué pasa con los navegadores antiguos que no entienden HTML5? ¿Qué pasa con las numerosas versiones de Internet Explorer que aún usan una ingente cantidad de internautas?

El problema ante estos navegadores es que no son compatibles con etiquetas semánticas y estructurales como HEADER, FOOTER, ARTICLE, etc. Por ello, una página que se vea en uno de esos clientes web no compatibles estará totalmente descuadrada. No aceptará estilos CSS sobre esos elementos ni procesará aquellas órdenes que realicemos sobre esos elementos del DOM, con lo que la experiencia de usuario para las personas que visiten el sitio desde navegadores antiguos será totalmente desvirtuada.

En el presente artículo de DesarrolloWeb.com veremos con mayor detalle cuáles son esos problemas de compatibilidad de las etiquetas nuevas del HTML5 con navegadores antiguos y cuáles son las posibles soluciones que podemos aportar con facilidad.

Nota: Si quieres saber más acerca de los nuevos elementos semánticos del nuevo lenguaje de la web, te recomendamos la lectura del artículo Las etiquetas semánticas de HTML5.

Podemos decir con alivio que hoy la mayoría de los navegadores es compatible con las etiquetas estructurales y semánticas. Navegadores como Firefox, Chrome, Opera o Safari hace tiempo que incorporaron esta parte del estándar que viene con HTML5. Además, como estos navegadores se actualizan con suma facilidad, hasta el punto que muchas veces el proceso es totalmente transparente para el usuario, podemos tener certeza que navegamos con un software que está en la última línea en cuanto a compatibilidad con los nuevos estándares. Sin embargo, esta historia no es tan bonita cuando hablamos de Internet Explorer y hay que recordar que ¡hoy continúa siendo el navegador mayoritario!

Internet Explorer y las etiquetas semánticas

Internet Explorer a partir de la versión 9 ya es compatible con diversas tecnologías relacionadas con el HTML5 y, entre ellas, con las etiquetas semánticas. Sin embargo, se trata de un navegador que no se actualiza por sí solo, sino que hay que hacerlo "a mano" y a menudo los usuarios no encuentran sencillo el procedimiento.

Nota: Podemos decir que ese modo de trabajo es una elección de Microsoft, que opina que los navegadores no deberían cambiar de versión de manera automática, para no producirse problemas derivados de esas actualizaciones y sitios o servicios web que, de la noche a la mañana, dejan de funcionar porque la nueva versión los reconoce de otra manera. Esta estrategia parece que no tiene mucha tendencia a cambiar por parte de la compañía, que siente que de esa manera está protegiendo a miles de corporaciones que utilizan su sistema operativo en millones de ordenadores.

Esa dificultad de actualización, unida a que Internet Explorer 9 no es compatible con sistemas todavía hoy populares como Windows XP, provocan que hoy muchas personas no puedan visitar correctamente un sitio que utiliza características del HTML5 como las etiquetas semánticas.

Hasta el propio Microsoft está haciendo esfuerzos para eliminar del mapa a Internet Explorer 6. A pesar de ello, hoy continúa siendo el navegador de aproximadamente un 7% de los usuarios. La versión 7 es utilizada por un 4% de los navegantes, mientras que Internet Explorer 8 es el navegador más usado en la actualidad con el 26% de los usuarios de la Web (datos de abril de 2012). Es por ello que resulta casi inviable olvidarnos de todas estas personas cuando desarrollamos un sitio web.

Efectos indeseables en navegadores no compatibles con HTML5

Podemos ver un ejemplo de sitio web diseñado con etiquetas semánticas del HTML5 para ver cómo se renderiza en un navegador no compatible con ellas, pues es la mejor manera de entender qué es lo que pasa.

La imagen anterior corresponde con el navegador Google Chrome, pero realmente se vería exactamente igual en otros clientes típicos como Firefox u Opera.

El problema, como venimos diciendo, es que hemos compuesto el sitio de EscuelaIT utilizando etiquetas semánticas del HTML, pero Internet Explorer no las reconoce.

<HEADER>
   contenido de la cabecera
   <NAV>Navegador de secciones</NAV>
</HEADER>
...

Luego hemos aplicado los estilos a estos elementos con CSS:

header {
   height: 190px;
   padding: 0 10%;
   background-image: linear-gradient(left top, #F4F4F4 30%, #E0E0E0 87%);
   clear: both;
}
header nav {
   margin: 1em 0;
   padding: 0.8em 0;
   border-radius: 6px;
}

Como estos elementos no son reconocidos por Internet Explorer, los estilos CSS no son aplicados y ocurre que todas las etiquetas quedan sin formato.

Claro que podríamos haberlo solucionado cambiando el código HTML, y utilizando elementos DIV con clases o identificadores, para luego aplicarle estilos de la manera tradicional.

<DIV id="header">
   contenido de la cabecera
   <DIV id="nav">Navegador de secciones</DIV>
</DIV>

#header{
   ...
}
#nav{
   ...
}

Pero esta manera de trabajar, aunque se vería correctamente en todos los navegadores y nos ahorraría muchos problemas, no tendría las ventajas de las etiquetas semánticas y los robots de indexación no entenderían tan bien su contenido, entre otras muchas situaciones.

Hacer que navegadores antiguos soporten las etiquetas semánticas

Por unos pocos navegadores que no son compatibles con las posibilidades del HTML5 es una pena que no podamos incorporar las ventajas que ellas nos traen. Sin embargo, existen diversos modos de proveer compatibilidad con HTML5 en navegadores poco actualizados.

Lo cierto es que los métodos para mejorar las características de los navegadores son bastante sencillos de incorporar. Simplemente debemos realizar algunas optimizaciones en el código de nuestro sitio web, para cargar algunas librerías que, mediante Javascript, ofrezcan soporte a navegadores que no tienen de manera nativa compatibilidad con las características del HTML5, en este caso las etiquetas semánticas.

Existen varias librerías para hacer esto, de las cuales voy a comentar brevemente un par de ellas.

Modernizr: Una librería para compatibilidad con HTML5 muy completa, que contiene un componente llamado "html5shiv" que permite que los navegadores comprendan las etiquetas semánticas. Simplemente tenemos que cargar la librería y listo!

http://modernizr.com/

ie7-js: Un script Javascript para hacer compatible a Internet Explorer, desde las versiones 5 a la 8, con los navegadores modernos, lo que incluye algunos asuntos como los elementos semánticos de HTML5, pero también otros fallos comunes de algunas versiones de los exploradores, como el uso de los PNG transparentes.

http://code.google.com/p/ie7-js/

Nota: Explicaremos con detalle ambas librerías en los siguientes artículos a publicar en este manual, pero de momento quiero informar que sobre Modernizr tenemos un completo tutorial en DesarrolloWeb.com: Manual de Modernizr.

Conclusión

Estamos ante etiquetas que incrementan las posibilidades de nuestros documentos HTML, para que tengan una estructura más clara y sean mejor indexados por los motores de búsqueda. Hoy, aunque no todos los navegadores entienden las etiquetas semánticas estructurales, se recomienda desarrollar sitios web que las utilicen.

Para los casos en que navegadores antiguos no entiendan esas etiquetas, existen librerías Javascript que nos pueden solucionar la vida y aportar de una manera sencilla soporte a HTML5.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Aitor Garrincha

28/1/2015
Semántico
Osea que el HTML semántico no es más que una serie de etiquetas que expresan su significado dentro del contexto de la página. Yo esperaba algo más, o es que aun no lo he entendido bien???

jaserrano

22/5/2015
Sobre navegadores compatibles
No entiendo la insistencia en las versiones antiguas de IE, que casi nadie utiliza, cuando este navegador ha sido el primero y el que más ha desarrollado el HTML5. ¿Por qué no se dice lo mismo de los demás navegadores? Vg. Chrome es una patata interpretándolo, no sólo el HTML5, sino el 4, ¡en las propias páginas de Blogger!, a menos que hagas varios ajustes en modo chrome/flags, algo que nadie hace. Esas etiquetas de compatibilidad con IE que vemos, por ejemplo, en todas las páginas de WordPress, no se usan para versiones obsoletas de los demás navegadores y, sin embargo, cualquiera que tenga un blog de WP (.com u .org) sabe que es prácticamente imposible editar una página con ese navegador.