Elemento HGROUP

Éste elemento ha sido propuesto para su eliminación, por lo que no debería utilizarse

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:

<header>
  <hgroup>
    <h1>Título de página</h1>
    <h2>subtítulo de página</h2>
  </hgroup>
  [Otros elementos de la cabecera]
</header>
<h2>Contenido 1</h2>[...]
<h2>Contenido 2</h2>[...]
Ejemplo de uso de HGROUP

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>

Únete a la conversación

1 comentario

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.