La etiqueta <hgroup> en HTML significa grupo de encabezamiento (Heading Group) y se utiliza para agrupar los elementos de encabezamiento. La etiqueta <hgroup> en HTML se utiliza para envolver uno o más elementos de encabezado desde <h1> hasta <h6>, como los encabezados y subencabezados. La etiqueta requiere la etiqueta inicial y la etiqueta final.

Nota

<hgroup> está obsoleto en la especificación HTML5 (W3C), pero es compatible con la versión WHATWG. El futuro de este elemento es aún incierto, por lo que es mejor abstenerse de utilizarlo.

Sintaxis

<hgroup> ... </hgroup>

Ejemplos de Uso

Los siguientes ejemplos ilustran la etiqueta <hgroup> en HTML:

Ejemplo 1: Un artículo con un título = no necesario

El título se compone de un solo <h1>, por lo que no se requiere ni <hgroup> ni <header>:

<article>
  <h1>El título va aquí</h1>
  <p>Lorem Ipsum dolor set amet</p>
</article>

Ejemplo 2: Un artículo con un título y metadatos

Aquí estamos usando <header> para agrupar el título y los metadatos asociados, por lo que no es necesario un <hgroup>:

<article>
  <header>
    <h1>El título va aquí</h1>
    <p><time datetime="2021-12-20">20th December, 2021</time></p>
  </header>
  <p>Lorem Ipsum dolor set amet</p>
</article>

Ejemplo 3: Este ejemplo contiene el título y el subtítulo.

Un <hgroup> contiene el título y el subtítulo del artículo:

<!DOCTYPE html>
 <meta charset="utf-8">
<html>
 
    <body>
         <!--La etiqueta HTML hgroup comienza aquí-->
            <hgroup>
                <h1>Este es el título.</h1>
                <h2>Este es el subtítulo.</h2>
            </hgroup>
         <!--La etiqueta HTML hgroup termina aquí-->
        </body>
         
 
</html>

Salida:

Ejemplo 1 de etiqueta HTML hgroup
Ejemplo 1 de etiqueta HTML hgroup

Ejemplo 4: Este ejemplo contiene Título, Subtítulo y Metadatos.

Un hgroup> contiene el título y el subtítulo del artículo, y luego un header> contiene los metadatos y el hgroup>:

<article>
  <header>
<!--La etiqueta HTML hgroup comienza aquí-->
    <hgroup>
      <h1>El título va aquí</h1>
      <h2>El subtítulo va aquí</h2>
    </hgroup>
<!--La etiqueta HTML hgroup termina aquí-->
    <p><time datetime="2021-12-20">20th December, 2021</time></p>
  </header>                
  <p>Lorem Ipsum dolor set amet</p>
</article>

Salida:

Ejemplo 2 de etiqueta HTML hgroup
Ejemplo 2 de etiqueta HTML hgroup

Compatibilidad con Navegadores

Internet Explorer hasta la versión 8.0 inclusive ignora la etiqueta <hgroup>, pero muestra su contenido.

Firefox es totalmente compatible con esta etiqueta a partir de la versión 4.0, pero las versiones 3.0 y posteriores también muestran el contenido de la etiqueta correctamente.

5/5 - (1 voto)