Introducción
La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el perfil de cualquier documento.
Problemas resueltos por HTML5
La definición de la estructura de un documento en HTML 4 y su algoritmo de perfilado es muy tosco y genera numerosos problemas:
- HTML5 quita la necesidad de elementos
<div>para definir secciones semánticas sin usar clases, introduciendo el nuevo elemento<section>. - Mezclar varios documentos es difícil. HTML5 lo resuelve con los elementos de seccionado (
<article>,<section>,<nav>y<aside>). - HTML5 introduce el elemento
<hgroup>que agrupa cabeceras relacionadas. - El elemento
<aside>permite incluir información relacionada que no forma parte del flujo principal. - Para información común del sitio, HTML5 introduce
<header>,<footer>y<nav>.
En general, HTML5 aporta precisión a las secciones y cabeceras, facilitando que los navegadores interpreten mejor la estructura del documento.
El algoritmo de perfilado de HTML5
Definiendo secciones
Todo el contenido dentro del elemento <body> es parte de una sección. Las secciones pueden anidarse y definirse con elementos como <section>, <article>, <aside>, <footer>, <header> y <nav>. Cada una puede tener su propia jerarquía de cabeceras.
Ejemplo
Ejemplo de estructura con secciones y un <aside>:
<section>
<h1>Forest elephants</h1>
<section>
<h1>Introduction</h1>
<p>In this section, we discuss the lesser known forest elephants.</p>
</section>
<section>
<h1>Habitat</h1>
<p>Forest elephants do not live in trees but among them.</p>
</section>
<aside>
<p>advertising block</p>
</aside>
</section>
<footer>
<p>(c) 2010 The Example company</p>
</footer>