HTML 5 | Elementos de encabezamiento: header, hgroup y h1-h6

21 October 2010

html5En este nuevo artículo de HTML 5 cubrimos las etiquetas dirigidas a los encabezados y títulos en una página: header, hgroup y h1-h6.

La etiqueta <header> define la introducción de un documento o sección, normalmente mediante la inclusión de etiquetas de título (h1-h6 o el elemento hgroup). No obstante, también puede ser utilizada para delimitar la tabla de una sección de contenidos, un formulario de búsqueda o logos de cierta importancia.

Ejemplo básico de <header>:

<header>
<h1>The most important heading on this page</h1>
</header>

<article>

<header>
<h1>Title of this article</h1>
</header>

<p>...Lorem Ipsum dolor set amet...</p>

</article>

La etiqueta <hgroup> se utiliza para agrupar títulos y subtítulos (h1-h6) a modo de cabecera en una sección.

Ejemplo básico de <hgroup>:

<article>

<hgroup>
<h1>Title goes here</h1>
<h2>Subtitle of article</h2>
</hgroup>

<p>Lorem Ipsum dolor set amet</p>

</article>

No debemos confundir conceptos: <hgroup> sólo puede contener grupos de encabezados (h1-h6) mientras que <header> puede contener grupos de encabezados, la misma etiqueta hgroup o cualquier otro elemento que sirva para introducir una sección.

El uso de las etiquetas <h1>-<h6> se mantienen prácticamente sin cambios. La ventaja en este caso es que HTML5 permite el uso de varios h1, uno para cada sección.

Ejemplo de la nueva manera de uso de h1:

<article>

<hgroup>
<h1>Article title</h1>
<h2>Article subtitle</h2>
</hgroup>

<section>
<h1>Section title</h1>
<p>Content…</p>

<section>
<h1>Subsection title</h1>
<p>Content…</p>
</section>

</section>

</article>

Bienvenidos a la web semántica, ¿qué te parece? ¿lo has probado?

Recibe nuestra novedades, case studies y articulos en tu correo

LIBRO SEO


Nuevo llamado a la acción


AUDITORIA SEO