Los elementos de la estructura en HTML5

1. Las cajas <div>

En HTML4, el elemento principal para estructurar las páginas web es la famosa "caja <div>". Con el elemento <div>, es posible crear zonas de visualización de forma rectangular. Cada una de esas zonas, de esas cajas <div>, puede ser identificada de manera exclusiva, mediante un código de identificación, y de ese modo, podemos aplicarle un formato con CSS. Ese código de identificación único se establece con el atributo id.

Ejemplo:

<div id="bannerSuperior"> 
... 
</div> 

También podemos usar las clases, cuando este formato se repita en la página y no se trate, por lo tanto, de un formato único.

Ejemplo:

<div class="comentarios"> 
... 
</div> 

A continuación, una vez que haya determinado la estructura, podrá aplicar el diseño con las hojas de estilo CSS, mediante los selectores de identificación que correspondan al código de identificación o a la clase en cuestión.

Ejemplo:

#bannerSuperior { 
... 
} 
.comentarios{ 
... 
} 

En el siguiente ejemplo, podemos ver la estructura de una página de tipo blog con cajas <div>:

2. La "divitis"

Con HTML4 y CSS 2.1, la estructura de las páginas, cuando esta es relativamente compleja, puede requerir...

1. Los nuevos elementos de la estructura

Con el HTML5 llegan nuevos elementos de estructura semántica. Estos nuevos elementos han sido definidos y se les ha asignado un nombre tras un largo análisis de los nombres más usados en las cajas <div>.

2. El elemento <header>

El nuevo elemento <header> permite insertar una zona de visualización para las cabeceras. Puede definirse esta cabecera para toda la página o para una zona determinada: artículo, menú lateral... 

Debemos considerar que este elemento se puede usar desde dos puntos de vista:

Esta es la definición del W3C para el elemento <header>: "The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1-h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos."

Como puede ver, el elemento <header> no tiene que aparecer obligatoriamente en la estructura de la página.

3. El elemento <footer>

El nuevo elemento <footer> permite insertar una zona de visualización para los pies de página. Volvemos a encontrarnos con la misma semántica de los encabezados. Es posible definir un pie de página para la página completa, o bien para cualquier otra zona de visualización...

1. Una estructura simple

Si volvemos a tomar como ejemplo la estructura de página que usamos al principio de este capítulo, podremos modificarla para adaptarla al HTML5.

En el elemento <header>, encontraremos los elementos del encabezado de la página, como el logotipo y el eslogan, por ejemplo.

En el elemento <nav>, situado a la izquierda, encontraremos los vínculos que nos permitirán navegar por ese sitio web.

Todos los artículos del blog estarán colocados, por supuesto, dentro de los elementos <article>. 

Por último, el pie de página, <footer>, podrá contener las menciones legales o los vínculos de contacto, por ejemplo.

2. Una estructura más elaborada

Veamos ahora la estructura de un sitio web un poco más elaborado.

Encontramos de nuevo el elemento <header>, que ya todos conocemos.

Debajo tenemos el primer elemento <nav>, para el menú de navegación general del sitio web, que nos permitirá navegar por las distintas páginas.

A la izquierda, tenemos una segunda caja <nav> para la navegación secundaria, que contiene los vínculos relacionados directamente con el contenido de la página en cuestión.

A la derecha, encontramos el elemento <aside>, que muestra información relacionada con el contenido de la página, como los vínculos...