La nueva versión de HTML, trae consigo grandes adelantos y facilidades tanto para el desarrollador como para los motores de búsqueda.
HTML 5 posee nuevas etiquetas, mucho más claras y que logran entregar información más clara y acotada a google y sus pares.
Profundizando un poco en el tema, repasaremos los principales elementos estructurales:
Elementos estructurales:
<section>
El elemento section nos servirá como contenedor de elementos similares en tématica. A diferencia del antiguo elemento div que no tenia ningún peso semántico, esta nueva etiqueta entrega información sobre el tipo de contenido que encontraremos dentro de él. Por ende, sólo debemos ocupar section para agrupar contenido relacionado.
<article>
Este elemento será ocupado para determinar contenido independiente y autónomo, es decir, todo contenido que pueda ser extraido y mantenga su coherencia. Por ejemplo un post en un blog, el cual podrá ser difundido por RSS sin sus elementos contextuales.
<header>
El elemento header representa a un grupo de elementos que ayuden a la introducción o a la navegación. Esta etiqueta nos da la posibilidad de ocuparla en la cabecera de nuestro código para unir todos los elementos como logo, nombre de página, bajada, menu principal, etc. Y además nos servirá para incluirla dentro de cada section con el fin de poder entregar claramente una especificación de su contenido.
<aside>
Este elemento deberá ser ocupado para agrupar contenido tangecialmente relacionado al contenido principal, dicho en otras palabras podrá albergar elementos que si los eliminamos no afecta la comprensión del contenido principal. Hay que dejar claro que no se debe ocupar siempre para los sidebar, ya que a veces encontramos información relacionada directamente con el contenido principal y si lo eliminamos, al usuario le faltará información.
<footer>
El elemento footer debe contener información sobre su elemento contenedor, por ende podemos ocuparlo tanto para poner la información de derechos de autor de la página o incluirlo dentro de cada section para especificar información de propiedad, autoría, enlaces, etc.
<nav>
Debe contener información sobre la navegación principal del sitio y no para enlaces externos. Dentro de esta etiqueta podríamos poner la lista con los links. Lo ideal sería ubicar esta etiqueta dentro de un elemento header.
Por el momento hay etiquetas que siguen siendo un tanto ambiguas, pero en gran parte de los casos son entendibles y en el peor de los casos podemos ocupar el séntido común.
Con esto terminamos la primera parte de esté artículo/tutorial sobre las posibilidades que nos entrega HTML5 en cuanto al concepto de web semántica.
Saludos,
