Elemento HGROUP

El elemento HGROUP representa el encabezado de una sección, agrupando únicamente elementos de encabezado H1-H6 cuando necesite varios niveles para contener títulos secundarios, títulos alternativos, etc.

Para la secuencia de encabezado del documento se toma como texto de encabezado el contenido elemento H1-H6 de mayor rango, o si no hubiera ninguno de esos elementos, el texto contenido en el elemento HGROUP.

Saber más: hgroup – heading group (enlace externo, en inglés).

Ejemplos

En ocasiones nos encontramos con títulos de página que contienen a continuación un subtítulo, que debería formar parte del encabezado, pero que se deja fuera para que dicho encabezado no sea excesivamente largo (en este caso un párrafo tras el encabezado):

1. H1 – Título de página
   1. P – Subtítulo
   2. H2 – Contenido 1
   3. H2 – Contenido 2

Otra opción es añadir el subtítulo como encabezado, pero será un encabezado fantasma y distorsionará la secuencia de encabezados:

1. H1 – Título de página
   1. H2 – Subtítulo
   2. H2 – Contenido 1
   3. H2 – Contenido 2

O se podría cambiar a H3 los encabezados de contenidos, pero estarían bajo un encabezado que no les corresponde:

1. H1 – Título de página
   1. H2 – Subtítulo
      1. H3 – Contenido 1
      2. H3 – Contenido 2

De las soluciones expuestas la adecuada sería que el subtítulo fuese un párrafo.

Pero en HTML 5 queda la alternativa del elemento HGROUP:

1. HGROUP – Título de página
   1. H2 – Contenido 1
   2. H2 – Contenido 2

Quedando el siguiente código:

Ejemplo de HGROUP en secciones dentro de un artículo:

<article>
  <section>
    <hgroup>
      <h1>Título de encabezado de la sección 1</h1>
      <h2>Subtítulo de encabezado</h2>
    </hgroup>
    <p>Texto de la sección 1</p>
  </section>

  <section>
    <hgroup>
      <h1>Título de encabezado de la sección 2</h1>
      <h2>Subtítulo del encabezado</h2>
    </hgroup>
    <p>Texto de la sección 2</p>
  </section>
</article>