The hgroup tag

El <hgroup> es un elemento de segundo nivel, que se utiliza para ajustar uno o más elementos de encabezado (<h1> a <h6> ), como el título y el subtítulo. Como con el <hgroup> solo se permite contener elementos de encabezado, algunos ejemplos podrían ser más fácil de mostrar cuándo y dónde se utilice <hgroup>.

An article with title

When there is just one title, there is no need for the <hgroup> element:

<article>
	<header>
		<h1>All about flour</h1>
	</header>
</article>

An article with title and metadata

Still, there is just one title, so even though there is some metadata about the article, the <hgroup> element is not relevant:

<article>
	<header>
		<h1>All about flour</h1>
		<p>Published on January 12th</p>
	</header>
</article>

An article with title and subtitle

Now we have to titles, so we can use the <hgroup> element:

<article>
	<header>
		<hgroup>
			<h1>All about flour</h1>
			<h2> Wheat flour is the backbone of the baked goods we love</h2>
		</hgroup>
	</header>
</article>

An article with title, subtitle and metadata

When we have several title and metadata, the <hgroup> element only contains the actual titles (which should be marked up with the <h1> trough <h6> elements):

<article>
	<header>
		<hgroup>
			<h1>All about flour</h1>
			<h2> Wheat flour is the backbone of the baked goods we love</h2>
		</hgroup>
		<p>Published on January 12th</p>
	</header>
</article>

What you have learned

• The <hgroup> element is always inside a <header> element
• The <hgroup> element only contains headings (such as subtitles or tag-lines), which are marked up with the <h1> trough <h6> elements
• All other <header> relevant content should be outside of the <hgroup> element