Etiqueta hgroup en HTML: título y subtítulo relacionados
La etiqueta <hgroup> agrupa un encabezado con párrafos relacionados, como un subtítulo, un título alternativo o una entradilla. Úsala cuando una frase acompañe al título sin abrir otra sección: así puedes expresar su relación sin convertir esa frase en otro encabezado.
Ejemplo mínimo: título y subtítulo
<hgroup>
<h1>Aprende HTML</h1>
<p>Guía práctica desde cero</p>
</hgroup>Se muestran el título «Aprende HTML» y, debajo, la frase «Guía práctica desde cero». Solo el primero es un encabezado, de nivel 1. El párrafo es un subtítulo asociado; no añade un segundo nivel a la jerarquía.
Para probarlo, sustituye el contenido del <body> del documento completo de esta guía por este fragmento. Sin CSS propio, el navegador aplica sus estilos habituales a <h1> y <p>. <hgroup> no incorpora un diseño de portada ni decide el tamaño del subtítulo.
Sintaxis y contenido permitido
Se escribe con apertura <hgroup> y cierre </hgroup>; ninguna de esas etiquetas se puede omitir. Su contenido directo sigue este orden:
- Cero o más párrafos
<p>. - Exactamente un encabezado, de
<h1>a<h6>. - Cero o más párrafos
<p>adicionales.
Se pueden intercalar elementos de soporte de scripts, como <script> y <template>. Eso no permite añadir cualquier contenedor: una navegación, una lista o un <div> deben quedar fuera del grupo. El texto asociado va dentro de los párrafos.
Puede aparecer donde se admita contenido de encabezado, por ejemplo dentro de <header>, <article> o <body>. No lo insertes dentro de un <p>. El HTML Living Standard para <hgroup> recoge este modelo vigente.
Aunque se permite un grupo con un único encabezado y ningún párrafo, el caso que lo hace útil es reunir ese título con su texto asociado. No cambia el nivel elegido para el encabezado.
Un subtítulo no siempre es otro encabezado
«Guía práctica desde cero» describe el alcance de «Aprende HTML»; no introduce un apartado que el lector necesite recorrer por separado. Por eso se marca con <p>.
En cambio, «Preparar el documento» puede ser el título de una sección que contiene instrucciones propias. En ese caso corresponde un encabezado del nivel adecuado, fuera de <hgroup>. La decisión depende de la función del texto, no de que quieras dibujarlo más grande o más pequeño. Consulta la guía de <h1> a <h6> para elegir niveles.
Caso práctico: cabecera de una lección
Guarda este documento como leccion.html, con codificación UTF-8, y ábrelo en el navegador. No requiere CSS, JavaScript, imágenes ni un servidor.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tu primera página HTML</title>
</head>
<body>
<main>
<article>
<header>
<hgroup>
<h1>Tu primera página HTML</h1>
<p>Una lección breve para practicar sin herramientas extra</p>
</hgroup>
<nav aria-label="Índice de la lección">
<ul>
<li><a href="#estructura">Estructura inicial</a></li>
<li><a href="#primer-parrafo">Primer párrafo</a></li>
</ul>
</nav>
</header>
<section id="estructura">
<h2>Estructura inicial</h2>
<p>Prepara un documento con su idioma y codificación.</p>
</section>
<section id="primer-parrafo">
<h2>Primer párrafo</h2>
<p>Escribe una frase que explique el tema de tu página.</p>
</section>
</article>
</main>
</body>
</html>Primero aparecen el título, la frase que lo acompaña y dos enlaces. Después se leen las dos secciones de la lección. El <header> reúne la introducción y la navegación; dentro de él, <hgroup> agrupa únicamente el título y su subtítulo. <nav> es su hermano, no su hijo.
Comprueba el ejemplo paso a paso:
- Recorre los enlaces con Tab y actívalos con Enter. Cada uno lleva a la sección correspondiente mediante su
id. - Revisa los encabezados en el inspector del navegador o en su árbol de accesibilidad: debe haber un nivel 1, «Tu primera página HTML», seguido de dos niveles 2, «Estructura inicial» y «Primer párrafo». El subtítulo no debe figurar como encabezado.
- Para comparar, retira las dos etiquetas de
<hgroup>, conservando sus hijos, y sustituye el párrafo del subtítulo por un<h2>con su cierre. Es una variante innecesaria: añade un encabezado de nivel 2 para una frase que no introduce contenido propio. El índice escrito a mano conserva sus dos enlaces; un índice generado a partir de los encabezados podría incluir esa entrada extra. - Vuelve al párrafo original y retira solo las etiquetas de
<hgroup>. El texto y los tres encabezados permanecen; se pierde la agrupación semántica del título con su subtítulo.
El grupo admite un solo encabezado. Si necesitas un <h1> y un <h2> porque cada uno introduce contenido propio, deben quedar en grupos o secciones distintos.
Diferencia entre hgroup y header
<hgroup> tiene un propósito concreto: asociar un título con texto que lo acompaña. <header> admite una introducción más amplia, que puede incluir un logo, navegación y otros elementos. En la lección se necesitan ambos porque la cabecera incluye también el índice.
Si solo quieres agrupar un título y una frase asociada, basta con <hgroup>; si necesitas reunir toda la introducción de una página o sección, considera la etiqueta <header>. Para un contenedor elegido únicamente por sus estilos, usa un elemento genérico cuando no exista una función semántica apropiada.
Atributos y accesibilidad
<hgroup> no tiene atributos específicos. Puedes usar class para dar estilo al conjunto del título y su subtítulo, o id si necesitas enlazar esa cabecera.
En el ejemplo, los id identifican las secciones y aria-label da nombre a la navegación; no son atributos de <hgroup>. No hace falta añadir role="heading" al grupo ni duplicar con ARIA el nivel del encabezado nativo.
El borrador de HTML AAM para <hgroup> lo relaciona con el rol group. La forma de anunciar esa asociación puede variar entre lectores de pantalla. Por eso sigue siendo necesario elegir bien el nivel del encabezado y escribir un subtítulo comprensible por sí mismo.
Errores frecuentes y preguntas
¿Hgroup está obsoleta? No en el estándar vigente consultado el 3 de octubre de 2026. La documentación antigua puede describir otra situación o un modelo con varios encabezados. Para escribir HTML actual, sigue el modelo de un encabezado y párrafos asociados.
¿Puedo poner dos encabezados dentro? No. Conserva un único <h1> a <h6> y marca el texto subordinado con <p>. Si el segundo título inicia una sección real, sácalo del grupo y elige su nivel por la jerarquía del documento.
Evita usar <hgroup> para toda la cabecera, esperar que añada estilos o emplear <h2> solo para reducir el tamaño de un subtítulo. <p> marca los párrafos asociados; no los convierte en títulos de sección.
Compatibilidad y fuentes
<hgroup> tiene soporte en los navegadores actuales. La referencia de MDN, consultada el 3 de octubre de 2026, complementa el estándar con sus datos de compatibilidad. Ese soporte no equivale a una lectura asistida idéntica: comprueba la jerarquía y el texto en la combinación de navegador y tecnología de asistencia que uses.