hgroup 要素見出しをまとめる

hgroup 要素はセクションの見出しを表し、複数の見出し要素 (h1, h2, h3, h4, h5, h6 要素) の組み合わせで構成される見出しを 1つのグループにまとめます。

hgroup 要素でまとめられた見出しのレベルは、その hgroup 要素内ある h1 ~ h6 要素の中で最もレベルが高い要素のレベルとなります。

見出し要素は文書のアウトラインに影響を与えます。アウトラインアルゴリズムにおいては、見出しレベルが変わると、その部分は新しいセクションの始まりと認識されます。しかし、例えばタイトルとサブタイトルの組み合わせをレベルの異なる見出し要素 (タイトルを h1 要素、サブタイトルを h2 要素など) でマークアップしたい場合、制作者の意図と、アウトラインに相違が出てしまうことがありました。hgroup 要素はこの問題を解決し、複数の見出し要素を 1つの見出しとして扱うことができます。

hgroup 要素の仕様

カテゴリ
コンテンツモデル
  • 1個以上の h1, h2, h3, h4, h5, h6 要素。必要に応じてスクリプト支援要素(script 要素、template 要素)と混在する。
この要素を使用できる文脈

フロー・コンテンツが期待される場所

この要素で使用できる属性

hgroup 要素のサンプルソース

<!-- サイトタイトルとサブタイトルをまとめた例 -->
<body>
 <header>
  <hgroup>
   <h1>俺の日記</h1>
   <h2>俺だよ俺</h2>
  </hgroup>
  <p>日々の出来事を適当に書いてる日記です。</p>
 </header>
 <article>
  <h1>○月○日の出来事</h1>
  <p>今日はとても暑い日でした。</p>
 </article>
 …省略…
</body>
<!-- hgroup 要素が使えない場合の例 -->
<body>
 <header>
  <h1>
   俺の日記
   <span>俺だよ俺</span>
  </h1>
  <p>日々の出来事を適当に書いてる日記です。</p>
 </header>
 <article>
  <h1>○月○日の出来事</h1>
  <p>今日はとても暑い日でした。</p>
 </article>
 …省略…
</body>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

仕様書の該当箇所

4.3.7 The hgroup element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ