Las nuevas etiquetas estructurales de HTML5 incluyen <section>, <article>, <aside>, <header>, <hgroup>, <footer>, y <nav> para organizar el contenido de una página. El documento explica el propósito de cada etiqueta y sugiere cómo usarlas, aunque su uso depende del criterio del desarrollador. Las etiquetas estructurales ayudan a los navegadores y buscadores a comprender mejor la estructura de una página.

1. Etiquetas estructurales en
HTML5

2. Etiquetas estructurales en HTML5
Las nuevas etiquetas que nos permiten
manejar la estructura de la página son:
<section>
<article>
<aside>
<header>
<hgroup>
<footer>
<nav>

3. Etiquetas estructurales en HTML5
Las siguientes indicaciones son "sugerencias",
por lo que cada desarrollador puede utilizarlas
a su criterio.

4. <header>
Son los elementos de introducción a la página
o a una sección.
Puede haber varios encabezados en una misma
página y por lo general, puede tener
elementos de navegación.

5. <section>
La etiqueta <section> nos servirá para agrupar
otros elementos, como artículos,
encabezados, etcétera.

6. <article>
El contenido dentro de la etiqueta <article>
debe ser independiente de la página, es decir,
si la movemos de página, el contenido no debe
cambiar de significado.
Puede contener otras etiquetas, incluso otras
etiquetas <article>

7. <aside>
Dentro de la etiqueta <aside> por lo general
colocamos el contenido que esta "a un lado" o
que si lo eliminamos no afecta el "significado"
de la página.
Por lo general se coloca publicidad, un menú
secundario, anotaciones, etcétera.

8. <hgroup>
Sirve para agrupar varias etiquetas de
encabezado (h1, h2, h3 etc.)
La etiqueta mayor será el encabezado y las
menores serán sub-encabezados.

9. <footer>
Agrupa a los elementos de pie de página,
como pueden ser las leyendas de marca
registrada, políticas de la página, menús
secundarios, etcétera.
SEO

10. Nota
El uso de las etiquetas estructurales es muy
flexible, por lo que puede existir varias
etiquetas <header>, muchas <section>,
etiquetas <article> dentro de otras <article>,
etcétera.
Siempre se recomienda usar el sentido común
en el uso de las mismas.

11. Estructuras
Estructura de una columna centrada,
encabezado y pie de página:

12. Estructuras
Dos columnas, encabezado y pie de página:

13. Estructuras
Tres columnas, encabezado y pie de página:

14. Estructura
Por lo general las estructuras pueden ser fijas,
líquidas o flexibles.
La estructura de una página HTML5 puede
contener etiquetas <div> sin entrar en
conflicto con las etiquetas estructurales.
Las características de estilo de las secciones
las daremos con CSS.

15. Resumen
● Las etiquetas estructurales son para uso de
los navegadores y buscadores, más que para
darle un beneficio (de momento) al usuario
de las páginas.
● Las etiquetas estructurales de HTML5 se
representan en una línea y no en bloque, en
la mayoría de los navegadores.
● No hay un uso estricto de las mismas, se
deja siempre a consideración del diseñador
de la página.