El HTML 5 introduce una serie de elementos estructurales que facilitarán tanto el desarrollo de las páginas como también el análisis de las mismas por buscadores.
Los elementos de HTML 5 que ayudan a estructurar la parte semántica de la página son:
header:El elemento header debe utilizarse para marcar la cabecera de una página (contiene el logotipo del sitio, una imagen, un cuadro de búsqueda etc)
El elemento header puede estar anidado en otras secciones de la página (es decir que no solo se utiliza para la cabecera de la página)
nav:El elemento nav representa una parte de una página que enlaza a otras páginas o partes dentro de la página. Es una sección con enlaces de navegación.
No todos los grupos de enlaces en una página deben ser agrupados en un elemento nav. únicamente las secciones que consisten en bloques de navegación más importantes son adecuados para el elemento de navegación.
section:El elemento section representa un documento genérico o de la sección de aplicación. Una sección, en este contexto, es una agrupación temática de los contenidos. Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezado.
Una página de inicio de un sitio Web puede ser dividida en secciones para una introducción, noticias, información de contacto etc.
footer:El elemento footer se utiliza para indicar el pié de la página o de una sección. Un pie de página contiene información general acerca de su sección el autor, enlaces a documentos relacionados, datos de derechos de autor etc.
aside: El elemento aside representa una nota, un consejo, una explicación. Esta área son representados a menudo como barras laterales en la revistas impresa.
El elemento puede ser utilizado para efectos de atracción, como las comillas tipográficas o barras laterales, para la publicidad, por grupos de elementos de navegación, y por otro contenido que se considera por separado del contenido principal de la página.
article: El elemento article representa una entrada independiente en un blog, revista, periódico etc.
Cuando se anidan los elementos article, los artículos internos están relacionados con el contenido del artículo exterior. Por ejemplo, una entrada de blog en un sitio que acepta comentarios, el elemento article principal agrupa el artículo propiamente dicho y otro bloque article anidado con los comentarios de los usuario.
Un ejemplo de página añadiendo estos elementos semánticos sería:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Elementos semánticos del HTML5</title>
</head>
<body>
<header>
<h1>Encabezado de la página</h1>
</header>
<nav>
<p>enlaces de navegación</p>
</nav>
<section>
<p>Sección 1</p>
</section>
<section>
<p>Sección 2</p>
</section>
<aside>
<p>Publicidad</p>
</aside>
<footer>
<p>Pié de página</p>
</footer>
</body>
</html>