[2023-08-22 更新]
ウェブ業界にいる人であれば知っている人は多いでしょうが、かつて HTML(5) の仕様は W3C 版と WHATWG 版とで分裂していた時期がありました。仕様が分裂していた時期、hgroup 要素の存続が非常に微妙になっていました。なぜなら、hgroup 要素は W3C では廃止になった一方で、WHATWG では存続していたからです。hgroup 要素を使って良いのか悪いのか、使うべきか使わざるべきか、W3C を信じるべきか WHATWG を信じるべきか、悩ましい時期でした。
そんな不安定な時代は過ぎ、現在、HTML の仕様といえば、WHATWG 版の HTML 仕様に一本化されています。つまり大手を振って hgroup 要素を使って良いのです。しかし、歴史的に HTML といえば W3C という認識がウェブ業界では強いせいか、hgroup 要素を避けてきた傾向があったのではないかと思います。
今回は、そんな忘れ去られそうな hgroup 要素について深掘りしてみたいと思います。
hgroup 要素の定義
WHATWG 仕様では「hgroup 要素は見出しとそれに関連するコンテンツを表す」と書かれています。そして、「h1 ～ h6 要素を、小見出し、副題、タグライン（キャッチフレーズ）を表すコンテンツを含んだ 1 個以上の p 要素とをグループ化するために使う」とあります（日本語訳は筆者）。
見出し（主題）にキャッチフレーズ（副題）を添えるならこんな感じでしょうか。
<hgroup>
<h1>情報通信白書</h1>
<p>新時代に求められる強靱・健全なデータ流通社会の実現に向けて</p>
</hgroup>
もちろん、見出し（主題）は h1 で、キャッチフレーズ（副題）は p ですね。HTML 文法上、p 要素は h1 ～ h6 要素の上にあっても下にあっても構いません。さらには両方に存在しても構いません。
<hgroup>
<p>令和5年版<p>
<h1>情報通信白書</h1>
<p>新時代に求められる強靱・健全なデータ流通社会の実現に向けて</p>
</hgroup>
仕様が変わった WHATWG hgroup 仕様
実は 2022 年 7 月に、WHATWG の hgroup 仕様が変更されました。おそらく、当初より hgroup 要素のことを知っていた方は、次のようなマークアップを見たことがあるのではないでしょうか。
<hgroup>
<h1>情報通信白書</h1>
<h2>新時代に求められる強靱・健全なデータ流通社会の実現に向けて</h2>
</hgroup>
ご覧の通り、副題に h2 要素が使われています。当時の hgroup 要素の仕様では、hgroup 要素の中には h1 ～ h6 要素しか入れることができませんでした。そして、数字が低い方（上記では h1 要素）が主題となり、残りは副題（上記では h2 要素）として扱われました。
今見ると、なんともおかしなマークアップに見えるのではないでしょうか。当時の WHATWG での仕様策定の記録や当時のブログ記事を読むと、HTML4 時代に使われてきた慣例を HTML5 仕様としたらしいです。悪く言うと、HTML4 時代に蔓延してしまった誤った使い方を HTML5 で正式に受け入れたということです。その後も標準化界隈では hgroup は物議を醸しだすネタとなっていました。そりゃぁそうでしょうね。
W3C HTML5 では副題はどのようにマークアップすることになってたの？
前述の通り、W3C 版の HTML5 仕様では hgroup 要素は廃止されていました。では、W3C 版の HTML5 仕様では副題はどのようにマークアップすれば良いと考えられていたのでしょうか。
結論を言うと、副題のための要素は定義されておらず、さらに、h1 ～ h6 も使うなと規定されています。セマンティクスに敏感な人なら当然、どうしろっていうんだ、と憤りますよね。その解決策がちゃんと仕様書の中に書かれています。仕様書に書かれたサンプルをそのまま引用します。
<header>
<h1>HTML 5.1 Nightly</h1>
<p>A vocabulary and associated APIs for HTML and XHTML</p>
<p>Editor’s Draft 9 May 2013</p>
</header>
p 要素ですと？と、さらに憤ったに違いないでしょう。でも、ちゃんと header 要素で囲っているところが憎いですね。いちおう本文とは区別されてます。
セマンティクスにこだわる人には納得できないですよね。W3C 仕様書には、まだ別の解決策が書かれています。そのまま引用します。
<h1>The Lord of the Rings: The Two Towers</h1>
「The Lord of the Rings」が主題で、「The Two Towers」が副題です。これは映画「ロード・オブ・ザ・リング/二つの塔」のことですね。主題と副題をコロンで区切ったらいいんじゃね、とのことです。セマンティクスな方にとっては、そもそもこれが解決策になっているのか微妙ってところでしょうか。
では最後にとっておきの方法をご紹介します。これも W3C 仕様書のサンプルをそのまま引用します。
<h1>Ramones <br>
<span>Hey! Ho! Let’s Go</span>
</h1>
br 要素と span 要素ねぇ…、とため息と一緒に聞こえてきそうです。スタイリングのために br 要素と span 要素を導入しただけというのがミエミエで、セマンティクス的に良くなったとは到底思えないですよね。
ということで、当時は WHATWG の案だろうが W3C の案だろうが、多くの人が納得する形になっていませんでした。
副題をマークアップで意味づけする価値はあるのか？
ページコンテンツに HTML 要素で意味づけすることは、コンピューターが文書構造を把握できるという点で大きなメリットがあります。例えば Google が検索結果に表示する内容、スクリーンリーダーの挙動など、HTML 要素によってコンテンツが意味づけされたおかげで成し遂げられています。とりわけ見出しは重要な意味を持つことが多いことは理解できるでしょう。
コンピューターが見出しを自動抽出することを考えたとき、ウェブ制作者は副題をどう扱ってほしいのでしょうか？また、見出しを抽出する側の Google やスクリーンリーダーは副題をどう扱いたいのでしょうか？
副題に価値がある情報が含まれているかはコンピューターには分かりません。さらに、ウェブ制作者は、無駄に長く価値もない駄文を hgroup 要素に入れることも可能です。もし仮に Google が hgroup 要素の副題の部分を検索ランキングで重要視するなんてことがあれば、SEO 対策として hgroup 要素の中に大量の駄文が詰め込まれるのは目に見えています。そのため、Google はそんなことは絶対にしないでしょう。
スクリーンリーダーの利用者の立場で考えてみましょう。見出しを列挙するなら、できる限り簡潔な見出しで文書全体を把握したいはずです。副題は見出しほど重要ではないわけですから、スクリーンリーダーには副題を無視してほしいと考えるのではないでしょうか。
一方、ウェブ制作者は、副題に重要な情報が含まれていると思うなら、それは副題ではなく主題に含めるべきです。
そう考えると、hgroup 要素の存在価値は何なのかと考えさせられます。
まとめ
最新の WHATWG の hgroup 要素の仕様の p 要素で副題をマークアップする方法は、かつての WHATWG と W3C の案の中間を狙ったのでしょう。筆者個人的には、だいぶん実用的になったと思います。とはいえ、CSS のフック目的にしか使わなさそう、というのが率直な感想です。
ということで、hgroup 要素を解説しておきながら、筆者的は今なお使わないだろうな、というオチでした。
今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
