El elemento <hgroup> se utiliza para agrupar un conjunto de encabezados (<h1> a <h6>) que están relacionados entre sí. Esto es útil cuando tienes un título principal y uno o más subtítulos que deben ser tratados como una sola unidad. Sin embargo, el uso de <hgroup> no es muy común y ha sido eliminado del estándar HTML5.1, por lo que su uso no es recomendado en la práctica moderna.
<hgroup> (No Recomendado) #Aquí tienes un ejemplo de cómo se podría haber usado <hgroup> en el pasado:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Uso de hgroup</title>
<style>
/* Add your CSS styles here */
</style>
</head>
<body>
<!-- Encabezado principal de la página -->
<header>
<hgroup>
<h1>Encabezado Principal de la Página</h1>
<h2>Subtítulo del Encabezado Principal</h2>
</hgroup>
<nav>
<ul>
<li><a href="#section1">Sección 1</a></li>
<li><a href="#section2">Sección 2</a></li>
<li><a href="#section3">Sección 3</a></li>
</ul>
</nav>
</header>
<main>
<!-- Sección 1 con su propio encabezado -->
<section id="section1">
<header>
<h2>Encabezado de la Sección 1</h2>
</header>
<p>Contenido de la sección 1.</p>
<footer>
<p>Pie de página de la sección 1.</p>
</footer>
</section>
<!-- Sección 2 con su propio encabezado -->
<section id="section2">
<header>
<h2>Encabezado de la Sección 2</h2>
</header>
<p>Contenido de la sección 2.</p>
<footer>
<p>Pie de página de la sección 2.</p>
</footer>
</section>
<!-- Sección 3 con su propio encabezado -->
<section id="section3">
<header>
<h2>Encabezado de la Sección 3</h2>
</header>
<p>Contenido de la sección 3.</p>
<footer>
<p>Pie de página de la sección 3.</p>
</footer>
</section>
</main>
<!-- Pie de página principal de la página -->
<footer>
<p>Pie de página principal</p>
</footer>
</body>
</html>En lugar de usar <hgroup>, es más común y recomendado usar una estructura de encabezados clara y jerárquica sin necesidad de agruparlos. Aquí tienes un ejemplo de cómo hacerlo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Estructura HTML</title>
<style>
/* Add your CSS styles here */
</style>
</head>
<body>
<!-- Encabezado principal de la página -->
<header>
<h1>Encabezado Principal de la Página</h1>
<p>Subtítulo del Encabezado Principal</p>
<nav>
<ul>
<li><a href="#section1">Sección 1</a></li>
<li><a href="#section2">Sección 2</a></li>
<li><a href="#section3">Sección 3</a></li>
</ul>
</nav>
</header>
<main>
<!-- Sección 1 con su propio encabezado -->
<section id="section1">
<header>
<h2>Encabezado de la Sección 1</h2>
</header>
<p>Contenido de la sección 1.</p>
<footer>
<p>Pie de página de la sección 1.</p>
</footer>
</section>
<!-- Sección 2 con su propio encabezado -->
<section id="section2">
<header>
<h2>Encabezado de la Sección 2</h2>
</header>
<p>Contenido de la sección 2.</p>
<footer>
<p>Pie de página de la sección 2.</p>
</footer>
</section>
<!-- Sección 3 con su propio encabezado -->
<section id="section3">
<header>
<h2>Encabezado de la Sección 3</h2>
</header>
<p>Contenido de la sección 3.</p>
<footer>
<p>Pie de página de la sección 3.</p>
</footer>
</section>
</main>
<!-- Pie de página principal de la página -->
<footer>
<p>Pie de página principal</p>
</footer>
</body>
</html>Título Principal:
<h1> se utiliza una sola vez en el encabezado principal de la página para indicar el título principal del documento.Subtítulo:
<p>) se utiliza para el subtítulo del encabezado principal. Esto es una práctica común y aceptada.Títulos de Secciones:
<section>) dentro del <main> tiene su propio encabezado utilizando <h2>. Esto mantiene una jerarquía clara de encabezados y ayuda a los motores de búsqueda y a los lectores de pantalla a entender la estructura del contenido.Aunque <hgroup> existió en versiones anteriores de HTML, su uso no es recomendado en la práctica moderna. En su lugar, es mejor utilizar una estructura de encabezados clara y jerárquica para mantener la accesibilidad y la semántica del documento.