これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。
HTML <hgroup> 要素は、ドキュメントのセクションの、複数レベルのヘッダーを表します。これは <h1>–<h6> 要素のセットをグループ化します。
| コンテンツカテゴリー | フローコンテンツ、ヘッディングコンテンツ、パルパブルコンテンツ |
|---|---|
| 許可された内容 | 1 個以上の <h1>、<h2>、<h3>、<h4>、<h5>、<h6> |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | フローコンテンツ を受け入れるすべての要素 |
| 許可された ARIA ロール | tab、presentation |
| DOM インターフェイス | HTMLElement |
属性
この要素は グローバル属性 以外の属性を持ちません。
使用上の注意
<hgroup> 要素は HTML5 (W3C) 仕様から削除されましたが、WHATWG 版の HTML には依然として含まれています。ほとんどのブラウザで部分的に実装されており、実装が削除される可能性は低くなっています。
ただし、<hgroup> 要素の主要な目的は HTML 使用で定義されたアウトラインのアルゴリズム によって見出しをどのように表示するかに作用することですが、どのブラウザでもアウトラインのアルゴリズムは実装されていないため、<hgroup> のセマンティクスは実際のところ、理論上のものになっています。
HTML5 (W3C) 仕様書では、<hgroup> を使用せずに 副見出し、サブタイトル、代替タイトル、スローガン をマークアップする方法についてアドバイスを提供しています。
<hgroup> 要素は、複数レベルの見出しを構成するためにドキュメントのセクションの主見出しと副次的な見出し (副見出しや副題など) をグループ化することが可能です。
言い換えると、<hgroup> 要素は副次的な子の <h1>–<h6> がアウトライン内で独自のセクションを生成することを妨げます。これらの <h1>–<h6> 要素は <hgroup> の子でなければ通常どおりです。
よって HTML 仕様で定義されているアウトラインのアルゴリズム で生成される理論的なアウトラインでは、<hgroup> は全体としてひとつの論理的な見出しを構成します。そして <hgroup> の子である <h1>–<h6> とともに、理論的なアウトライン内でひとつの論理的な見出しを構成するために複数レベルのユニットとしてのアウトラインになります。
このようなアウトラインの (理論的ではない) 描画ビューを生成するために、マルチレベルの性質を伝えるため <hgroup> の見出しをどのように描画するかについて、レンダリングツールのデザインでいくつかの選択が必要です。例えば以下のように、描画されたアウトラインで <hgroup> を表示するさまざまな方法が考えられます:
- 主見出しの後および最初の副次的な見出しの前にコロンと空白 (“
:”) または同様の句読点を置く形で (および同じまたは同様の句読点を、他の副次的な見出しの前に置いて)<hgroup>を描画されたアウトラインで表示する - 主見出しの後に、括弧でくくった副次的な見出しを置く形で、
<hgroup>を描画されたアウトラインで表示する
以下の HTML ドキュメントで考えてみましょう:
<!DOCTYPE html>
<title>HTML Standard</title>
<body>
<hgroup id="document-title">
<h1>HTML</h1>
<h2>Living Standard — Last Updated 12 August 2016</h2>
</hgroup>
<p>Some intro to the document.</p>
<h2>Table of contents</h2>
<ol id=toc>...</ol>
<h2>First section</h2>
<p>Some intro to the first section.</p>
</body>
このドキュメントのアウトラインを描画すると、以下のようになるでしょう:
ここでは主見出し「HTML」の後にコロンと空白を置いて、副次的な見出し「Living Standard — Last Updated 12 August 2016」が続きます。
あるいは、以下のようにアウトラインを描画することもできるでしょう:
ここでは主見出し「 HTML」の後に、括弧でくくった副次的な見出し「 (Living Standard — Last Updated 12 August 2016)」があります。
例
<hgroup id="document-title"> <h1>HTML</h1> <h2>Living Standard — Last Updated 12 August 2016</h2> </hgroup>
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| HTML Living Standard <hgroup> の定義 |
現行の標準 |
ブラウザー実装状況
| 機能 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本サポート | 5 | (有) | 4.0 (2.0) | 9.0 | 11.10 | 4.1 |
| 機能 | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | 2.2 | (有) | 4.0 (2.0) | 9.0 | 11.0 | 5.0 |