Mi primera web en HTML5 II. Elementos estructurales

A medida que los desarrolladores de webs comenzaron a incorporar el nodo div en la maquetación de sus páginas, e iban, a su vez, abandonando la mala práctica de basar la maquetación en tablas HTML, vieron que una forma muy lógica de separar la estructura de la página era dividirla en partes conceptuales, vamos a decir. O sea, en partes claramente diferenciadas en significado.

Por ejemplo, llegaron a la conclusión de que lo mejor que podían hacer con la información de la página web que siempre está arriba, la cabecera, era meterla en un div llamado header. Siguiendo esta línea, el contenido principal de la página se metía en el div content, y la información que siempre está en el pie de la página, el pie, se ponía toda ella en el div footer.

Muy lógico. Sin darse cuenta, los desarrolladores estaban estructurando el significado de la página mediante la creación de capas identificadas con nombres adecuados. De acuerdo a esta idea, el esqueleto de una típica página HTML 4 podía ser éste:

Pues bien, HTML5 incorpora como novedad un conjunto de elementos estructurales que vienen a sustituir a los antiguos divs que identificaban las partes de la página (cabecera, contenido, pie, etc.).

Algunos de los nuevos nodos estructurales HTML5 son:

header

Es el contenedor de la información introductoria. Puede contener ayudas navegacionales. La etiqueta header se puede poner en varias partes del documento; por ejemplo, al principio de la página o al principio de una sección.

hgroup

Se utiliza para agrupar un conjunto de títulos y subtítulos, es decir, elementos h1-h6, de forma consistente. Sólo puede contener elementos h1-h6.

nav

Define un área de navegación, típiamente compuesta por enlaces. El área de navegación principal debe estar a la misma altura que la cabecera de la página, la sección principal, y el pie de la página.

article

Se utiliza para poner una pieza de contenido relevante. Por ejemplo, en un article puede haber una noticia, un artículo, la entrada de un blog, un post, el comentario de un usuario, o cualquier otra pieza de contenido independiente.

section

Contiene partes de un documento temáticamente relacionadas: una lista con los capítulos de un ensayo, el área de acceso (login) a la parte privada de una página web, etc.

aside

Este elemento sirve para poner las partes de la página web que están poco relacionadas con el contenido principal. Las típicas barras laterales se ponen ahora en este nuevo elemento. Usaremos aside para poner cajas de publicidad, notas aclaratorias, etc.

footer

Es el contenedor del pie de la página: información del autor, política de privacidad, información de copyright, etc.

Con el nuevo soporte semántico de HTML5, el esqueleto de una página web de 2012 pasa a ser el siguiente:

Mucho más sencillo, ¿no?

Ahora viene la gran pregunta… ¿Puedo utilizar ya estos nodos HTML5 en mis nuevas webs? La respuesta es sí. A continuación adjunto esta tabla publicada en la Wikipedia donde podemos ver cómo soportan los navegadores actuales el estado actual del HTML5.

Los elementos estructurales que he presentado en este post están soportados ampliamente en los navegadores modernos, así que no tengas miedo de comenzar a utilizarlos, ¡incorpóralos desde hoy mismo a tus nuevos desarrollos!

Otro tema es la compatibilidad de HTML5 con los navegadores más antiguos. En otro post hablaré de Modernizr, una librería JavaScript que detecta la disponibilidad de implementaciones nativas para tecnologías Web de última generación, es decir, funciones que se derivan de las especificaciones de HTML5 y CSS3.

Ya para acabar, aprovecho para animarte a experimentar con estas nuevas características del HTML y a utilizar el servicio de validación de código HTML5 del W3C. Actualmente ya está disponible el doctype HTML5 (experimental).