TOC

The community is working on translating this tutorial into Ukrainian, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".

Semantic HTML5 section tags:

The hgroup tag

The <hgroup> is a second-level element, used to wrap one or more heading elements (<h1> to <h6> ), such as the title and sub-heading. As the <hgroup> is only allowed to contain heading elements, some examples might be the easiest way to show when and where the <hgroup> should be used.

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

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!
adplus-dvertising