ウェブ業界にいる人であれば知っている人は多いでしょうが、かつて HTML(5) の仕様は W3C 版と WHATWG 版とで分裂していた時期がありました。仕様が分裂していた時期、hgroup 要素の立場が非常に微妙になっていました。なぜなら、hgroup 要素は W3C では廃止になった一方で、WHATWG では存続していたからです。hgroup 要素を使って良いのか悪いのか、使うべきか使わざるべきか、W3C を信じるべきか WHATWG を信じるべきか、悩ましい時期でした。
そんな不安定な時代は過ぎ、現在、HTML の仕様といえば、WHATWG 版の HTML 仕様に一本化されています。つまり大手を振って hgroup 要素を使ってよいのです。しかし、歴史的に HTML といえば W3C という認識がウェブ業界では強いせいか、hgroup 要素を避けてきた傾向があったのではないかと思います。
今回は、そんな忘れ去られそうな hgroup 要素について深掘りしてみたいと思います。
hgroup 要素の定義
WHATWG 仕様では「hgroup 要素はセクションの見出しを表し、それは hgroup 要素の中にあるすべての h1 ～ h6 要素から成る」（日本語訳は筆者）と書かれています。hgroup 要素の中には複数の h1 ～ h6 要素を入れることができ、主題とともに、副題、代替の見出し、キャッチフレーズなどを表現することができます。
以下、WHATWG HTML 仕様に記載されているサンプルを日本語向けにアレンジしたものを挙げてみます。
見出しに副題やキャッチフレーズを添えるならこんな感じでしょうか。
<hgroup>
<h1>情報通信白書</h1>
<h2>デジタルで支える暮らしと経済</h2>
</hgroup>
もちろん、主題は h1 で、副題は h2 ですね。
もう一つの用途である「代替の見出し」って分かりにくいですよね。WHATWG HTML 仕様に書かれたサンプルは日本人にはまったくなじみがない例で実感がわきません。個人的には使うことはないだろうなぁ、と思いつつ、あえて日本語の場合の例を作ると、こんな感じでしょうか。
<hgroup>
<h1>ジャガイモ</h1>
<h1>馬鈴薯</h1>
</hgroup>
注目すべき点は、同じ見出しレベルの h1 を 2 つ使っているところです。どちらが上でどちらが下というわけではありません。とはいえ、レベルが同じと言われても困りますよね。なので、この場合は、最初の h1 が第 1 見出し、次の h1 が第 2 見出しとして扱われます。WHATWG HTML 仕様では、もしこれを一つの見出しとして見せるなら「ジャガイモ（馬鈴薯）」でいいんじゃない、と言ってます。
見出しレベル
前述の h1 と h2 を使って主題と副題をマークアップした例では、見出しレベルは何になるのでしょう？レベル 1 (h1) でしょうか？それともレベル 2 (h2) でしょうか？
<hgroup>
<h1>情報通信白書</h1>
<h2>デジタルで支える暮らしと経済</h2>
</hgroup>
結論を言えば、レベルが高いほう、つまり h1 です。注意してほしいのは、「情報通信白書」と「デジタルで支える暮らしと経済」の両方で一つの見出しであり、その見出しレベルが 1 ということです。言い換えると、hgroup 要素がレベル 1 の見出しになる、ということです。
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 要素を導入しただけというのがミエミエで、まったくセマンティクス的に良くなってないと思いますよね。
最後に
と、まぁここまで煽っておいて、筆者の考えはというと、実は W3C の仕様のサンプルに書かれている方法で良いんじゃね、というのが本音です。そもそも副題をマークアップで意味づけする必要はそこまでないんじゃないかと思うのですよねぇ。その副題とやらを見出しにしたいなら h1 に主題とともに入れればよいわけですし、そうでなければ、h1 の外に出せばよいだけで。
実際のところ、副題と言いながらも見出しの一部ということが多いんじゃないでしょうか？であれば、副題も h1 の中に入れ、見た目は span 要素などを使って CSS でアレンジすれば良いわけですしね。
ということで、hgroup 要素を解説しておきながら、筆者的は使わないだろうな、というオチでした。今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
