---
title: hgroup
slug: Web/HTML/Element/hgroup
translation_of: Web/HTML/Element/hgroup
original_slug: Web/HTML/Elemento/hgroup
---
<h2 id="Resumen">Resumen</h2>

<p>El <em>elemento de grupo de cabeceras HTML</em> (<span style="font-family: Courier New;">&lt;hgroup&gt;</span>) representa el encabezado de una sección. Define un solo título que participa de <a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">la estructura del documento </a>como el encabezado de la sección implícita o explícita a la que pertenece.</p>

<p>Su <em>text</em>o para el algoritmo de estructura es el texto del primer elemento de encabezado HTML de más alto rango (ip.ej., el primer {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }} o {{ HTMLElement("h6") }} con el número más pequeño entre sus descendientes) y el <em>rango</em> es el rango del mismo elemento de encabezado HTML.</p>

<p>Por tanto, este elemento agrupa varios encabezados, pero solo el primero contribuye a la estructura del documento. Permite asociar títulos secundarios, como subencabezados, títulos alternativos, e incluso lemas, con el encabezado principal, sin contaminar la estructura del documento.</p>

<p>Este elemento se fue removido de la especificacion HTML5 (W3C), por favor no usar mas.</p>

<h3 id="Contexto_de_uso">Contexto de uso</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <td>Contenido permitido</td>
   <td>Cero o más elementos HTML de encabezado ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }})</td>
  </tr>
  <tr>
   <td>Omisión de etiqueta</td>
   <td>Ninguna, ambas, la etiqueta de inicio y fin son obligatorias</td>
  </tr>
  <tr>
   <td>Elementos padre permitidos</td>
   <td>
    <p>Cualquier elemento que acepte <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flujo de contenido</a>.</p>
   </td>
  </tr>
  <tr>
   <td>Documento nomativo</td>
   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element">HTML5, section 4.4.7</a></td>
  </tr>
 </tbody>
</table>

<h3 id="Atributos">Atributos</h3>

<p>Este elemento no tiene más atributos que los <a href="/en/HTML/Global_attributes" rel="internal">atributos globales</a>, común a todos los elementos.</p>

<h2 id="Notas_de_uso">Notas de uso</h2>

<div class="note">
<p>Si bien el elemento <code>&lt;hgroup&gt;</code> se eliminó de la especificación HTML5 (W3C), todavía se mantiene en la versión WHATWG de HTML. De todos modos, está parcialmente implementado en la mayoría de los navegadores, por lo que es improbable que desaparezca.<br>
 Sin embargo, dado que el propósito principal del elemento <code>&lt;hgroup&gt;</code> es afectar cómo <a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">el algoritmo de generación de esquemas de documento</a> muestra los encabezados, pero <strong>dicho algoritmo no ha sido implementado por ningún navegador</strong>, la semántica de <code>&lt;hgroup&gt;</code> es por el momento solo teórica.<br>
 La especificación HTML5 (W3C) aconseja entonces cómo maquetar <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">subtítulos, títulos alternativos y lemas</a> sin utilizar <code>&lt;hgroup&gt;</code>.</p>
</div>

<h3 class="editable" id="Interfaz_DOM">Interfaz DOM</h3>

<p>Este elemento implementa la interfaz<code> <a href="/es/DOM/element" title="en/DOM/element">HTMLElement</a></code>.</p>

<h3 id="Ejemplos">Ejemplos</h3>

<pre class="brush: html">&lt;hgroup&gt;
  &lt;h1&gt;Main title&lt;/h1&gt;
  &lt;h2&gt;Secondary title&lt;/h2&gt;
&lt;/hgroup&gt;
</pre>

<h3 id="Compatibilidad">Compatibilidad</h3>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>5</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>9.0</td>
   <td>11.10</td>
   <td>4.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>2.2</td>
   <td>{{ CompatGeckoMobile("2.0") }}</td>
   <td>9.0</td>
   <td>11.0</td>
   <td>5.0 (iOS 4.2)</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Ver_también">Ver también</h3>

<ul>
 <li>Otros elementos relacionados a sección: {{ HTMLElement("body") }}, {{ HTMLElement("article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }};</li>
 <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Secciones y estructuras de un documento HTML5</a>.</li>
</ul>