HTML5, nuevos elementos organizativos

Después de <nav> </nav> la siguiente etiqueta es <aside> </aside>, de la siguiente manera.

<aside>

</aside>

Dentro de <aside> vamos a utilizar <blockquote>

<aside>
<blockquote>Primer elemento</blockquote>
<blockquote>Segundo elemento</blockquote>
</aside>

Después del <aside> iría el contenido principal con <section> </section>, de la siguiente manera

<section>
<p>párrafo de ejemplo</p>
</section>

Después del contenido principal con <section> tenemos que construir el pie de la página, con la etiqueta <footer></footer>, de la siguiente manera.

<footer>Tlfo</footer>

El esquema general sería entonces

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<header>

</header>
<nav>

</nav>
<aside>

</aside>
<section>

</section>
<footer>

</footer>
</body>
</html>

<header> y <footer> sirve no sólo para crear el esquema de nuestra página web, sino para definir tb la cabecera y el pie de un artículo dentro de <section> son una etiqueta nueva denominada <article></article> que sirve para identificar artículos relacionados, de la siguiente manera:

<section>
<article>
<p>Noticia 1</p>
<p>Seguimos hablando de noticia 1</p>
<p>Terminamos de hablar de la noticia 1</p>
</article>

<article>
<p>Noticia 2</p>
<p>Seguimos hablando de noticia 2</p>
<p>Terminamos de hablar de la noticia 2</p>
</article>

<article>
<p>Noticia 3</p>
<p>Seguimos hablando de noticia 3</p>
<p>Terminamos de hablar de la noticia 3</p>
</article>
</section>

Esto lo podemos escribir de la siguiente manera.

<article>
<header>
<h2>Noticia 3</header>
</header>
<p>Seguimos hablando de noticia 3</p>
<p>Terminamos de hablar de la noticia 3</p>
<footer>Pie de la noticia 3</footer>
</article>

Padres, hijos y hermanos

Hay etiquetas que están un nivel por encima (padres), un nivel por debajo (hijos), o el mismo nivel (hermanos). Por ejm, <head> es etiqueta hija de <html>, mientras que <html> es padre de <head>. <title> es hermana de <link> por ejm, ya que están al mismo nivel.

<hgroup>

<hgroup> sirve para agrupar títulos, veamos un ejm.

<hgroup>
<h1>Título</h1>
<h2>Subtítulo</h2>
</hgroup>

Veamos un ejm completo de un artículo

<article>
<header>
<hgroup>
<h2>Título</h2>
<h3>Subtítulo</h3>
</hgroup>
</header>
</article>

Es conveniente utilizar <h1> tan sólo para el título de la página web por jerarquía.