Etiqueta HTML <hgroup>
La etiqueta HTML <hgroup> agrupa un encabezado con su subtítulo o eslogan. Aprende el modelo de contenido, la sintaxis y ejemplos con W3docs.
La etiqueta HTML <hgroup> agrupa un único encabezado (uno de <h1>–<h6>) junto con uno o más elementos <p> que actúan como su subtítulo, eslogan o título alternativo. Su función es mantener ese texto de apoyo vinculado al encabezado en lugar de convertirse en un elemento independiente en el esquema del documento.
Por ejemplo, el título de una página y su eslogan pertenecen juntos. Sin <hgroup>, tendrías que marcar el eslogan como un encabezado de nivel inferior (sobrecargando el esquema) o como un párrafo simple (perdiendo la asociación visual y semántica). <hgroup> resuelve esto: el encabezado define la entrada en el esquema, y el contenido de <p> queda asociado a él.
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Learn HTML, CSS, and JavaScript online for free.</p>
</hgroup>Modelo de contenido
Esta es la parte que la mayoría de los tutoriales más antiguos entienden mal. El <hgroup> actual no envuelve varios elementos <h1>–<h6> hermanos. Su modelo de contenido es:
- exactamente un elemento de encabezado (
<h1>,<h2>,<h3>,<h4>,<h5>o<h6>), más - cero o más elementos
<p>antes y/o después de ese encabezado.
Los elementos <p> contienen el subtítulo, el título alternativo o el eslogan. Solo el encabezado único contribuye al esquema de la página; los párrafos están asociados a él pero no crean encabezados propios.
Estado de la especificación
El elemento <hgroup> fue eliminado de la especificación HTML durante varios años, razón por la cual gran parte de la documentación más antigua lo califica como no compatible y desaconseja su uso. Ese consejo está desactualizado: <hgroup> fue restaurado al WHATWG HTML Living Standard en 2022 con el modelo de contenido más simple de encabezado más párrafos descrito anteriormente. Es un elemento válido hoy en día.
<hgroup> es un elemento válido en el WHATWG HTML Living Standard actual (restaurado en 2022). Todos los navegadores modernos renderizan su contenido correctamente. Ten en cuenta que no tiene semántica de accesibilidad especial integrada: las tecnologías de asistencia exponen el encabezado que contiene como un encabezado normal, y los elementos <p> como texto ordinario.
Sintaxis
La etiqueta <hgroup> va en pares: tanto la etiqueta de apertura <hgroup> como la de cierre </hgroup> son obligatorias.
Ejemplo de la etiqueta HTML <hgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Here you can learn the HTML basics.</p>
</hgroup>
</body>
</html>Ejemplo de la etiqueta HTML <hgroup> usada con propiedades CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hgroup {
text-align: right;
font-family: Arial, sans-serif;
padding-right: 30px;
border-right: 15px solid #42c73a;
}
h1 {
font-size: 30px;
}
hgroup p {
margin: 0;
font-size: 18px;
color: #555;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Learn online</p>
</hgroup>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>Atributos
La etiqueta <hgroup> no tiene atributos específicos del elemento. Admite los Atributos Globales y los atributos de eventos estándar.
Compatibilidad con navegadores
<hgroup> es compatible con todos los navegadores modernos — Chrome, Firefox, Safari y Edge — y forma parte del WHATWG HTML Living Standard actual. Dado que no tiene estilos predeterminados más allá de ser un contenedor de bloque, la compatibilidad significa en la práctica que el navegador renderiza el encabezado y sus párrafos como se espera.
Etiquetas relacionadas
- Etiqueta HTML
<header>— contenido introductorio para una página o sección, donde a menudo reside un bloque de título<hgroup>. - Etiquetas HTML
<h1>–<h6>— los elementos de encabezado que se colocan dentro de<hgroup>. - Encabezados HTML — descripción general de cómo los encabezados dan forma a la estructura del documento.