<hgroup>タグの解説
<hgroup>は、見出しに付随する副題やキャッチフレーズがある場合に、それらの情報をグループ化するために使います。この要素を使う場合、必ず子要素に見出しを含め、副題やキャッチフレーズは<p>要素で囲うことが推奨されます。
ドキュメント自体のヘッダーは、多くの場合<header>要素で囲います。<header>はサイトのロゴやグローバルナビゲーション、検索窓などのコンポーネントを収めるのに適しています。
一方、<hgroup>はページごとの大見出しに対して、小見出しや副題、キャッチフレーズがある場合に、それをまとめて関連付ける役割を果たします。
<hgroup>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素はセクショニング・コンテンツではないので、アウトラインに影響を与えません。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<hgroup>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<hgroup>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<hgroup>は見出しと小見出しをグループ化するのに適していますが、複数の見出し要素を含めることは推奨されていません。そのため、主題に関連する副題やキャッチフレーズは<p>要素で囲うことが推奨されます。
<!-- 非推奨 -->
<hgroup>
<h1>このページの主題・タイトル</h1>
<h2>主題に関連する副題</h2>
</hgroup>
<!-- 推奨 -->
<hgroup>
<h1>このページの主題・タイトル</h1>
<p>主題に関連する副題</p>
</hgroup>
<hgroup>を置く場所
<hgroup>は主題と副題をグループ化するために用いる要素のため、ページの先頭や記事の冒頭に置くことを想定します。<hgroup>自体はウェブページのアウトラインに影響を与えませんが、子要素に含まれる見出しが必然的にアウトラインを生成します。
<body>
<hgroup>
<h1>コンテンツのタイトル</h1>
<p>見出しに関連するフレーズ</p>
</hgroup>
<h2>コンテンツの見出し</h2>
<p>コンテンツの内容。</p>
<p>コンテンツの内容。</p>
<h2>コンテンツの見出し</h2>
<p>コンテンツの内容。</p>
<p>コンテンツの内容。</p>
</body>
<main>
<hgroup>
<h1>メインコンテンツのタイトル</h1>
<p>見出しに関連するフレーズ</p>
</hgroup>
<section>
<h2>セクションの見出し。</h2>
<p>セクションの内容。</p>
<p>セクションの内容。</p>
</section>
<section>
<h2>セクションの見出し。</h2>
<p>セクションの内容。</p>
<p>セクションの内容。</p>
</section>
</main>
<hgroup>と<header>の使い分け方
似たような名前を持つ要素に<header>がありますが、これらの要素には仕様上の明確な違いがあります。<hgroup>は見出しを表すヘディング・コンテンツというカテゴリーに属しており、ARIAロールの既定値はgroupです。対する<header>は単純なフロー・コンテンツで、ARIAロールの既定値はコンテンツの区分を表すセクショニング・コンテンツの中に配置されていない限りbannerとなります。
つまり、<header>はコンテンツの先頭を表すコンテナやランドマークとして使用することを想定しており、その中にはロゴ画像やナビゲーションメニュー、検索窓などが設置される可能性があるということです。しかし、<hgroup>は見出しと不可分であり、許可されている内容は<h1>〜<h6>と<p>要素だけです。
これらを総括すると、<hgroup>は、あくまで本文の見出しに副題やキャッチフレーズが付く場合に、それをグループ化して明確に文章の関連性を示すためだけに用いることになります。
コンテンツの先頭に見出しに付随するパーツが多数ある場合は、<hgroup>ではなく<header>を採用すべきです。例えばアイキャッチ画像やパンくずリスト、著者やカテゴリーへのリンクをグループ化して、その下にコンテンツがぶら下がる構造を作りたい時などです。
<article>
<header class="post-header">
<h1>記事のタイトル</h1>
<div class="post-term">
<p class="category"><a href="category">Category</a></p>
<p class="tag"><a href="tag">tag</a></p>
</div>
<figure class="post-image">
<img src="/images/file" width="800px" height="420px">
<figcaption>©picture copyright.</figcaption>
</figure>
</header><!--=== post-heade ===-->
<div class="post-content">
<h2>コンテンツの見出し。</h2>
<p>コンテンツの内容。</p>
<p>コンテンツの内容。</p>
<h2>コンテンツの見出し。</h2>
<p>コンテンツの内容。</p>
<p>コンテンツの内容。</p>
</div><!--=== post-content ===-->
</article>
上記のようなヘッダーに値するコンテンツをグループ化したいという目的で<hgroup>を使ってはいけません。<hgroup>はあくまで見出しと副題に関連性を持たせるための要素です。その意味では、コンテンツ・メインのページよりも文章主体のページに向いていると言えます。