Estructura web HTML5 y sus roles. HTML5 Layout - HTML5 Section, HTML5 Aside, HTML5 Nav, HTML5 Article, HTML5 Footer, HTML5 Main

HTML5 ofrece nuevos elementos semánticos para definir la estructura de la web, con ello ayudaremos a los mototres de búsqueda a comprender mejor la estructura de nuestra web haciéndola más visible de cara a los buscadores, más accesible y más sostenible. A continuación os dejamos un resumen con un esquema de esas etiquetas.

Para explicar cuándo y cómo se usan las etiquetas de estructura HTML5 vamos a tomar como referencia lo que dice la w3c HTML5 Section Elements.

Uso Semántico de las etiquetas:

<header> Representa contenido introductorio del elemento que lo contien (elemento padre). Se usa para definir la cabecera general de la página o la cabecera de cualquier contenido, por lo tanto se puede usar mas veces en una misma página.

<nav> Representa un grupo de links que navega a otras partes o páginas de nuestras web. Al representar un grupo de links tenemos que maquetarlos usando listas <ul> para que semánticamente sea perfecto. No todos los grupos de links necesitan estar en un elemento <nav>. Es muy común tener un footer con enlaces a política de privacidad, página de inicio o copyright. En estos casos la etiqueta <nav>se basta por si misma y no es necesario ponerla.

<section> es muy similar a <article> y por eso son de las que más dudas producen, incluso los expertos no se ponen de acuerdo a la hora de usar uno u otro. Engloba un grupo temático de contenido que normalmente viene seguido de un encabezado. Por ejemplo una página de inicio puede ser separada en diferentes secciones, como introducción, contenído o información de contacto. Para identificarlo mejor nos podemos hacer la pregunta ¿está todo el contenido relacionado?.

<article> Usaremos esta etiqueta si al quitarlo del contenido que lo rodea es capaz de seguir teniendo sentido por si mismo, es decir que se pueda publicar solo.

<aside> Está diseñado para representar contenido relacionado. Puede ser usado en elementos como notas, barras laterales, grupos de enlaces <nav> y todo contenido que se considere separado del contenido principal. Sólo por el hecho de que cierto contenido aparezca a la derecha o izquierda del contenido principal no tiene por que ser un elemento <aside>. Para identificarlo mejor hay que preguntarse si se puede quitar ese elemento sin reducir el significado del contenido principal.

<footer> Se usa para definir el pie general de la página o el pie de cualquier sección, por lo tanto se puede usar mas de una vez en la misma página.

<main> Identifica el contenido principal de la página y solo puede haber uno por cada página.

<div> Se usa cuando necesitamos juntar contenido sin necesidad de tener sentido semántico, es decir que no signifique nada.

Por último, necesitamos aplicar el atributo role correctamente.

Role es un atributo XHTML que nos permite pasar información a los navegadores acerca del propósito de ese elemento, permitiendo escanear rápidamente el contenido de nuestra web, haciéndola más accesible. Resumiendo: nos proporcionará ventajas de accesibilidad, adaptación de dispositivos, procesos del lado servidor y de comprensión de descripción de datos.

A continuación resumimos los mas importantes:

<header role=”banner”></header>
<nav role=”navigation”></nav>
<main role=”main”></nav>
<section role=”main”>
<article role=”article”></article>
<aside role=”complementary”></aside>
<main role=”conteninfo”> </main>

Si necesitáis mas información es muy recomendable visitar la sección de W3C Using WAI-ARIA in HTML y sobre todo la tabla de recomendaciones que nos va a decir exactamente qué roles son válidos para cada etiqueta.