Anteriormente hice un avance de lo que la nueva web semántica nos depara con la nueva especificación de HTML5. Hoy vamos a profundizar un poco más en el tema y vamos a hacer un repaso por los nuevos elementos de estructuración de nuestros documentos HTML.
Elementos estructurales
Durante muchos años, hemos utilizado div con clases específicas para definir --por regla general-- un header, un footer, navs y otras entidades muy comunes al desarrollo de cualquier sitio web.
Era de esperar que algún día, todas esas entidades formaran parte del lenguaje y ese día es hoy gracias a la nueva especificación del lenguaje HTML5.
Section
El nuevo elemento section tiene como cometido el agrupar elementos realacionados entre si de forma temática. Es muy similar al uso que se le da al elemento div pero con la diferencia de que el elemento div no tiene ningún peso semántico y no nos informa sobre el tipo de contenido que alberga. El elemento section se usa de forma explícita para agrupar contenido relacionado.
La regla para saber cuando usar el nuevo elemento section es sencilla, tan solo debes hacerte esta pregunta, "¿está todo el contenido que va a albergar relacionado entre sí?":
Introducción al elemento section
El elemento section se usa para agrupar contenido relacionado entre si.
Puede ser usado como un reemplazo al elemento div en ciertas circunstancias
Header
Según la nueva especificación, "El elemento header representa a un grupo de ayudas de introducción o a la navegación". Existe una diferencia clave entre el elemento header y el uso habitual del término header o cabecera utilizado comúnmente para situar los elementos del encabezado de un sitio web.
Una página web debe definir un header principal donde normalmente irá el logo o el nombre del sitio y seguramente un menú de navegación, pero además puede --y debe-- definir otros elementos header dentro de los elementos section. La especificación describe al elemento section como "una agrupación temática de contenido, usualmente con un encabezado" o lo que es lo mismo, con un header:
El Señor de los Poyaques
Cuando Frodo Bolsón de pipas vio a lo lejos el carromato de Chandal el Morao...
...
Y así fue como nuestros héroes abandonaron la chabolada.
Así, el elemento header suele aparecer por regla general al principio de un documento o section pero realmente no tiene por qué. Se define por su contenido más que por su posición. Esto último lleva al error a algunos diseñadores poco experimentados con la nueva especificación.
Footer
Igual que ocurre con el elemento header, el elemento footer suena como si describiera su posición, pero al igual que con header lo que define es su contenido. El elemento footer debe contener información sobre su elemento contenedor: quien lo ha escrito, información de propiedad intelectual, enlaces, etc.
Es básicamente el mismo uso abstracto que todos los desarrolladores y desarrolladoras web tenemos en la cabeza cuando pensamos en un footer solo que ampliado al contexto de que cada section puede contener uno:
El Señor de los Poyaques
Cuando Frodo Bolsón de pipas vio a lo lejos el carromato de Chandal el Morao...
...
Y así fue como nuestros héroes abandonaron la chabolada.
Aside
Como pasa con otros elementos de la nueva especificación, cuando hablamos del elemento aside o de un sidebar no nos estamos refriendo a elementos que aparecen a la izquierda o la derecha del contenido principal, sino que es el contenido el que importa y no su posición.
El elemento aside debe utilizarse para agrupar contenido relacionado tangencialmente en el contexto de que su relación con el contenido principal no se relaciona directamente sino de forma lateral. Si tienes contenido que consideras que de be de estar apartado del contenido principal, entonces, debes utilizar un elemento aside para él.
Una regla sencilla para saber cuando puede ser necesario utilizar un elemento aside es cuando la respuesta a la pregunta "¿si se elimina el contenido que agrupa el elemento aside, se reduce el significado del contenido principal?" sea negativa.
Solo porque el diseño de un contenido diga que visualmente debe renderizarse a un lado del contenido principal, no significa que deba de ser contenido por un elemento aside. Es común ubicar información sobre el autor del contenido --por ejemplo-- en el sidebar. Pero semánticamente, ese tipo de contenido debe estar encerrado en un elemento footer, de hecho la especificación menciona de forma explícita que tipos de contenido como información sobre el autor y similares deben ser enmarcados dentro de una etiqueta footer.
El noventa por ciento del tiempo, un header se emplazará en el principio de una sección, un footer al final y un aside a un lado, pero recuerda que estos elementos no han sido creados para dar sentido a un layout sino para aumentar la semántica de la estructuración de nuestros documentos. Para los layouts se usa siempre CSS, que para eso existe.
Nav
El elemento nav contiene información sobre la navegación por el sitio web, usualmente una lista de enlaces con el atributo display inline. Este elemento debe de ser utilizado solo para la navegación principal del sitio y no para enlaces externos por ejemplo.
Normalmente el elemento nav aparece dentro de un elemento header. Esto da sentido a la afirmación de la especificación sobre el elemento header cuando dice eso de "grupo de ayudas de introducción o a la navegación".
Article
El elemento article es como una especialización del elemento section. Debe usarse para definir contenido autónomo e independiente predecible de ser reutilizable de modo aislado. El truco, está en decidir que significa eso de "autónomo".
Si nuestro contenido puede ser redistribuido en RSS o en Atom feed y sigue manteniendo íntegro su significado, entonces, probablemente el elemento article sea el contenedor apropiado para utilizar en nuestro documento. De hecho, el elemento article está especialmente indicado para sindicación.
Si recuerdas el artículo anterior, podemos utilizar el elemento article junto al elemento time y el atributo pubdate para indicar que el contenido tiene adherida una fecha de publicación:
La Comunidad del Pepinillo
Cuando los pequeños "jobits" partieron rumbo a las tierras de Bayor (Ximo Bayor) con su amigo el Legolas...
Si tienes más de un elemento time en un artículo, solo uno de ellos puede añadir el atributo pubdate. El elemento article es especialmente útil para posts en blogs, noticias en prensa digital, comentarios y posts en foros. Cubre exactamente los mismos casos que el microformato hAtom.
La especificación de HTML5 añade además que el elemento article debe ser usado por widgets autónomos como; calculadoras, relojes, marcos de clima y cosas por el estilo. Esto convierte al elemento en algo bastante confuso y poco intuitivo. Como siempre hay que analizar si el contenido de un widget es autónomo, independiente y puede ser reutilizable e incluso sindicado.
Conclusión
Lo más problemático es que los elementos article y section son muy similares. Lo único que los separa es la palabra "autónomo". Decidir cual usar depende en muchos casos de la interpretación que haga el diseñador o diseñadora web y lo mejor es utilizar el sentido común y usar lo que en cierto contexto nos parezca es más semántico.
Hasta aquí llegamos hoy con esta introducción a la web semántica en HTML5 II y nos queda aún una tercera parte donde hablaremos sobre los content models y profundizaremos más en las nuevas categorías de contenido como los "text-level semantics".
En Genbeta Dev | Introducción a HTML5
