HTML5 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:

Try this example
<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:

Try this example
<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:

Try this example
<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):

Try this example
<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>