Si bien cada diseñador puede estructurar y organizar su página web como desee, veremos un posible diseño que es utilizado en la mayoría de las páginas.

Si bien siempre hubo diferentes formas para organizar un documento WEB, en sus principios uno de ello fue el uso de la etiqueta <table> … </table>, la que permitía distribuir los diferentes objetos sobre el documento WEB.

Más adelante, estos elementos fueron reemplazados por otras etiquetas como las <div>, permitiendo lograr nuevos objetivos y haciendo más fácil el mantenimiento de las páginas.

HTML5 incorporó nuevos elementos que ayudaron a identificar cada sección del documento y organizar el cuerpo del mismo.

En HTML5 las secciones más importantes son diferenciadas y la estructura principal ya no depende más de los elementos <div> o <table>, lo que no significa que no se sigan utilizando.

Normalmente, una página o aplicación web está dividida entre varias áreas visuales para mejorar la experiencia del usuario y facilitar la interactividad.

Las palabras claves que representan cada nuevo elemento de HTML5 están íntimamente relacionadas con estas áreas, como veremos en la siguiente figura:

Esqueleto

Cabecera: espacio donde se ubica el logo, título, subtítulos y una breve descripción de la página WEB.
Barra de Navegación: su propósito en la mayoría de los casos es presentar el menú o lista de enlaces para poder facilitar la navegación a través sitio.
Información Principal: el contenido mas relevante de una página se encuentra ubicado en esta zona central de la pantalla. En la mayoría de los casos se divide en dos secciones.
Institucional o Pie: normalmente se muestra información acerca del sitio web, el autor, o los datos de la empresa.

Las etiquetas que acompañan cada una de estas zonas se ven reflejada en la siguiente figura:

Esqueleto

<header> </header>: Uno de los nuevos elementos incorporados en HTML5 es <header>. Este elemento no se debe confundir con <head> usado antes para construir la cabecera del documento.
<nav> </nav>: Crea la zona del menú u opciones de navegación de nuestro sitio.
<section> </section>: Como explicamos anteriormente, la columna Información Principal contiene la información más relevante del documento y puede ser encontrada en diferentes formas (por ejemplo, dividida en varios bloques o columnas). Debido a que el propósito de estas columnas es más general, el elemento en HTML5 que especifica estas secciones se llama simplemente <section>.
<aside> </aside>: Barra Lateral se ubica al lado de la columna Información Principal.
<footer> </footer>: Determina el pie de la página.

En la especificación HTML5, HTML está a cargo de la estructura del documento y provee un grupo completo de nuevos elementos para este propósito.

La especificación también incluye algunos elementos con la única tarea de proveer estilos.

Ejemplo:

<body>

<header>

<!-- el contenido del encabezado del sitio -->

</header>
<nav>

<!-- el menú de navegación -->

</nav>
<section>

<!-- el contenido de la página principal -->

</section>
<aside>

<!-- el contenido que acompaña -->

</aside>
<footer>

<!-- el contenido del pie de página -->

</footer>

</body>