¿Qué es HTML5?

HTML5 es la última versión del lenguaje de etiquetas conocido como HTML, gracias a sus nuevos elementos, atributos y comportamiento, hacen de ella una herramienta muy potente tanto para programadores como para diseñadores ya que ofrece: mayor velocidad de carga del website, soporte de vídeo, posibilidad de desarrollar gráficos, mayor flexibilidad en los estilos y un completo conjunto de APIs.

Por otro lado, HTML5 se adapta a cualquier dispositivo ya sea un PC, móvil, tablet o TV. A priori parece que son todo ventajas, pero existe un problema y es que estas nuevas etiquetas o características son invisibles para la mayoría de los usuarios, ya que no todos los navegadores soportan HTML5 como muchas versiones de Internet Explorer o Firefox .

Se pueden ver qué etiquetas de HTML5 son soportadas por las diferentes versiones de los navegadores en caniuse . Para poder utilizar las etiquetas que no son soportadas por los navegadores existen los llamados Pollyfill, código gratuito que implementa la funcionalidad correspondiente a la etiqueta en cuestión.

Nuevos elementos en HTML5

Varios son los estudios que han identificado que la mayoría de las páginas web tienen una estructura o conjunto de elementos en común, como son: menús de navegación, cabecera y pie entre otros. Hasta ahora la forma de identificarlos y asignarles formato o diseño era mediante el uso de ficheros externos como  CSS o Javascript, haciendo más lenta la carga del site.

En esta imagen vemos un formato de website típico:

Por lo tanto nacen nuevas etiquetas HTML para almacenar estos elementos comunes en los websites llamados “section elements“: <section>, <article>, <nav>, <aside>. Existe una extensión de Google Chrome muy útil para poder analizar los section elements de las páginas web.

Buenas prácticas con HTML5

1. Por razones de accesibilidad es recomendable utilizar las etiquetas de heading <h1>, <h2>…<h6> en cada sección <section>, <article>, <nav>, <aside>, incluso después de la etiqueta body que es la sección raíz.
2. Reemplazar las etiquetas strong o em por <mark>, con el objeto de resaltar una parte de texto, siempre que sea posible para mejorar la usabilidad (UX).
3. Utilizar datos enriquecidos para mejorar el ranking en los buscadores, las páginas web con un buen uso de datos enriquecidos serán mejor indexadas por los buscadores ya que éstos entenderán mejor su contenido.

Y para finalizar unas herramientas de gran utilizad para insertar y validar los microdatos de nuestras páginas:

- Desde esta página web se puede generar datos enriquecidos de forma muy sencilla http://www.barryko.com/seo/html5-microdata-schema-generator/

- Y desde esta otra http://tools.seomoves.org/microdata/ podremos ver su aspecto.