<hgroup>見出しのグループ化

<hgroup>タグはセクションの見出しを示し、h1~h6要素をグループ化する場合に使います。 例えば記事のタイトルをh1、サブタイトルをh2で表示する時などにhgroup要素を使う事で、これらの二つの見出しをグループ化できます。

HTML5では、一つのセクションの中に複数の見出しを配置すると、暗黙的なセクションが生成されます。 基本となる見出しの他にサブタイトルやキャッチフレーズのような別の見出しを付けたい場合に、そこに暗黙的なセクションが生成されないようにそれらの見出しをグループ化し、一つの見出しとして機能させるのがhgroup要素の役割となります。

hgroup要素内にh1~h6要素がある場合、その中で最もレベルが高い見出しだけがアウトライン上の見出しとして機能します。 レベルの低い方の見出しはアウトラインには現れません。

なお<hgroup>は、HTML5 の草案で採用が検討されていましたが、最終勧告では破棄されています。

HTML5での変更点

hgroup要素は、HTML5から追加された要素です。ですが、仕様からは削除されています。

書式

  • <hgroup 属性="値">~</hgroup> ……… 見出しのグループ化

使用した時の例

<h1>みかん</h1>
<h2>主な生産地</h2>
<p>ミカンは主に和歌山で生産.....</p>

例えば上記のように記述すると、HTML5では下記のように解釈されます。

<section>
<h1>みかん</h1>
  <section>
    <h2>主な生産地</h2>
    <p>ミカンは主に和歌山で生産.....</p>
  </section>
</section>

ですが、下記のようにhgroup要素を使用する事でh1とh2要素が一つのヘッダとして解釈されます。

<hgroup>
<h1>みかん</h1>
<h2>主な生産地</h2>
</hgroup>
<p>ミカンは主に和歌山で生産.....</p>

<!-- 上記のように記述すると下記のように解釈されます -->
<section>
 <hgroup>
 <h1>みかん</h1>
 <h2>主な生産地</h2>
 </hgroup>
 <p>ミカンは主に和歌山で生産.....</p>
</section>

対応ブラウザなどのデータ

形式 <hgroup>~</hgroup> カテゴリ フローコンテンツ・ヘディングコンテンツ
親要素 フローコンテンツが期待される場所 子要素 h1~h6
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer9~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~