hgroupタグの使い方とその役割

「見出しグループをまとめるタグ」として登場した<hgroup>ですが、「そもそも必要なの？」という疑問を持つ方も多いかもしれません。
実際に仕様変更があり、非推奨（廃止予定）となっていた時期もあります。

この記事では、<hgroup>の使い方とその役割について解説します！

hgroupタグとは？

<hgroup>は、見出し（<h1>〜<h6>）をグループ化するためのタグです。
例えば、メインタイトルとサブタイトルがある場合、それらを<hgroup>でまとめることで、ブラウザやスクリーンリーダーが「これはセットの見出しなんだな」と理解しやすくなります。

<hgroup>
  <h1>HTMLの<hgroup>タグとは？</h1>
  <span>見出しをグループ化する方法</span>
</hgroup>

このように、メインの見出し（<h1>）と補助的なテキストをセットにするのが<hgroup>の役割です。

ブログ記事やニュース記事では、タイトルの補足情報としてキャッチフレーズを入れることがあります。

<hgroup>
  <h1>最新のWebデザイントレンド2025</h1>
  <span>未来を先取りするデザイン手法とは？</span>
</hgroup>

このようにすることで、メインタイトルと補足説明がセットであることを示せます。

企業サイトのヘッダー部分でも活用できます。

<hgroup>
  <h1>ChatGPT Inc.</h1>
  <span>AIで未来を創る</span>
</hgroup>

このようにブランド名とキャッチコピーをグループ化すると、デザイン的にも整理しやすくなります。

hgroupタグを使うことで、見出し構造を明確にすることができます。
通常、以下のように<h1>と<h2>を並べると、別々の見出しと認識されることがあります。

<h1>HTMLの<hgroup>タグとは？</h1>
<h2>見出しをグループ化する方法</h2>

しかし、これを<hgroup>で囲むと、「これは一つのまとまり」と伝えることができます。

<hgroup>
  <h1>HTMLの<hgroup>タグとは？</h1>
  <h2>見出しをグループ化する方法</h2>
</hgroup>

スクリーンリーダーや検索エンジンが、このセットを「主見出し + 副見出し」と理解しやすくなります。

<hgroup>の中に別の<hgroup>を入れることはできません。

❌ 間違った例

<hgroup>
  <h1>Webデザイン</h1>
  <hgroup>
    <h2>トレンド2025</h2>
    <h3>最新技術の活用</h3>
  </hgroup>
</hgroup>

これは正しく動作しません。

<hgroup>の中には<h1>〜<h6>のみを入れるべきです。

❌ 間違った例

<hgroup>
  <h1>Webデザイン</h1>
  <p>最新のトレンドについて解説します。</p> <!-- これはNG -->
</hgroup>

<p>タグなどのテキスト要素は入れず、見出しだけをグループ化しましょう。

<hgroup>タグはHTML5で導入されましたが、一時期「非推奨」とされていました。
しかし、HTML Living Standard（現在のHTML標準）では再び有効な要素として定義されています。

一時的に非推奨になった理由は下記の通りです。

ブラウザのサポートが不完全だった
- hgroupの意味を正しく処理するブラウザが少なかったため、意図した通りに動作しないケースが多かった。
スクリーンリーダーとの相性が悪かった
- hgroup内の見出しが「ひとつのグループ」として解釈されることで、アクセシビリティ（A11Y）の問題が発生。
CSSや構造化マークアップ（<header>など）で代替可能だった
- hgroupを使わなくても、適切なHTML構造とCSSを活用すれば同じことができる。

非推奨の間、代替え案としてaria-labelledby属性が使われていました。
スクリーンリーダーでの適切な読み上げを意識する場合、aria-labelledbyを使って見出しの関係を明示できます。

<header aria-labelledby="main-title sub-title">
  <h1 id="main-title">HTMLの歴史</h1>
  <p id="sub-title">～ 過去から未来へ ～</p>
</header>

これにより、スクリーンリーダーはh1とpを関連付けて読み上げてくれます。

主要なブラウザでは問題なく使用できますが、まだ<hgroup>に最適化されたスタイルは少ないため、CSSで適宜調整するとよいでしょう。

<hgroup>は非推奨になった都合で見かけることが減っていますが、過去のコードを理解するうえで知っておくと役立ちます。
HTMLは進化を続けているので、最新の仕様をチェックしながら、より良いコーディングを心がけましょう！