見出しをグループ化する

★この要素は廃止されました★　参考情報としてこのページはしばらく残しておきます。

• この要素はHTML5で追加される予定でしたが、最終的には廃止となりました。

hgroup要素は、見出しをグループ化するための要素です。この要素の内容には、h1-h6要素だけを配置することができます。

hgroup要素は、複数のh1-h6要素をグループ化し、それを1つの見出しとして表します。

例えば、キャッチフレーズを含めた見出しを表す場合は、hgroup要素を使って次のように記述します。

<hgroup>
<h1>タイトル</h1>
<h2>キャッチフレーズ</h2>
</hgroup>

扱いについて

見出しグループの扱いは次のようになります。

• 見出しグループの中で最も高いランク（h1に近い要素）が、そのhgroup要素の見出しランクになる。
• そして、その最も高いランクの要素内容が、hgroup要素の見出しテキストとして扱われる。
• 上記以外の要素内容は、小見出し、サブタイトル、キャッチフレーズなどとして扱われる。

• 見出しテキスト以外の内容（キャッチフレーズ等）は、特定のアプリケーション（文書を要約して表示するようなもの）やアウトライン上では表示されなくなるようです。（詳細未確認）

次の例では、hgroup要素の見出しランクはh3になり、h3要素の内容が見出しテキストとして扱われることになります。それ以外の内容（h4、h5）は、サブタイトルやキャッチフレーズとして扱われます。

<hgroup>
<h3>タイトル</h3>
<h4>サブタイトル</h4>
<h5>キャッチフレーズ</h5>
</hgroup>

同じランクの見出しが複数存在する場合は、先に記述された方がhgroup要素の見出しテキストになります。

<hgroup>
<h1>タイトル</h1>
<h1>サブタイトル</h1>
</hgroup>

セクションについて

HTML5では、見出しを配置すると暗黙的なセクションが生成されます。

<h1>タイトル</h1>
<h2>サブタイトル</h2>
<h3>キャッチフレーズ</h3>

<p>（セクションの内容）</p>

例えば、上記のように見出しを配置した場合、このままでは次のようなセクションが生成されてしまうことになります。（セクションの中に、子セクションと孫セクションが生成されます）

hgroup要素を使ってグループ化しておくと、その内容が1つのセクションに対する見出しとして扱われるようになります。

<hgroup>
<h1>タイトル</h1>
<h2>サブタイトル</h2>
<h3>キャッチフレーズ</h3>
</hgroup>

<p>（セクションの内容）</p>