hgroup は、h1 や h2 でサブタイトルを記述した場合に、これらをひとつのタイトルとして扱いたい場合に使用します。

HTML5 では、暗黙的なセクションの概念があります。

<h1>タイトル１</h1>
<p>本文...</p>
<h1>タイトル２</h1>
<p>本文...</p>

のような文書の構造は、下記のように解釈されます。

<section>
  <h1>タイトル１</h1>
  <p>本文...</p>
</section>
<section>
  <h1>タイトル２</h1>
  <p>本文...</p>
</section>

また、

<h1>タイトル１</h1>
<p>本文...</p>
<h2>タイトル２</h2>
<p>本文...</p>

のような文書の構造は、下記のように解釈されます。

<section>
  <h1>タイトル１</h1>
  <p>本文...</p>
  <section>
    <h2>タイトル２</h2>
    <p>本文...</p>
  </section>
</section>

ここで、

<h1>ドラゴンクエスト�V</h1>
<h2>そして伝説へ...</h2>
<p>本文...</p>

と記述すると、

<section>
  <h1>ドラゴンクエスト�V</h1>
  <section>
    <h2>そして伝説へ...</h2>
    <p>本文...</p>
  </section>
</section>

と解釈されてしまいますが、hgroupを用いることにより、

<hgroup>
  <h1>ドラゴンクエスト�V</h1>
  <h2>そして伝説へ...</h2>
<hgroup>
<p>本文...</p>

が、下記のように解釈され、h1＋h2 がひとつのヘッダのように扱われます。

<section>
  <hgroup>
    <h1>ドラゴンクエスト�V</h1>
    <h2>そして伝説へ...</h2>
  <hgroup>
  <p>本文...</p>
</section>