HTMLにおける「副題」の書き方がいつの間にかまた変わっていた

HTMLで文章を書くとき、表題の下に副題を入れたいケースは結構あります。

こんな感じで。

でもそれをどう書くのが正解なのかの議論は長いこと混乱していたのですね。

久々にこの辺の現在の仕様を確認したところ、2年前の時点でこの問題に一応の決着がついていました。また、過去に自分が出していた結論がもはや時代遅れになっていたことも分かりました。ここで情報を纏めておきます。

結論

今どきはこう書かなければならないらしい。

<hgroup>
<h1>HTMLにおける「副題」の書き方がいつの間にかまた変わっていた</h1>
<p>~目まぐるしい仕様の変遷～</p>
</hgroup>

参考:

: 見出しグループ要素 - HTML: ハイパーテキストマークアップ言語 | MDN

ちょっと前まではこんな感じだった

<hgroup>
<h1>HTMLにおける「副題」の書き方がいつの間にかまた変わっていた</h1>
<h2>~目まぐるしい仕様の変遷～</h2>
</hgroup>

なんならhgroupタグ自体が非推奨扱いだった

html5の仕様が活きていた時代、hgroupタグは提案はされたものの正式に仕様に反映される前に廃案に。意識高い人達は、正式には受理されていないという理由から、hgroupを使わないで副題を組み込むHTMLコーディングをいろいろ提案していました。このころ、html5とhtml LSという二つの「規格」が併存し、それとは別に各々のブラウザベンダーはベンダーで独自に解釈と実装をすすめるという大混乱時代でした。

そんな状況の中、副題などという微妙な代物の扱いは、さらに宙ぶらりんでした。

かつて提案されたことがある色々なコーディング

<h1>HTMLにおける「副題」の書き方がいつの間にかまた変わっていた<br>
<span>~目まぐるしい仕様の変遷～</span>
</h1>

<header>
  <h1>HTMLにおける「副題」の書き方がいつの間にかまた変わっていた</h1>
  <p>~目まぐるしい仕様の変遷～</p>
</header>

<div class="header">
  <h1>HTMLにおける「副題」の書き方がいつの間にかまた変わっていた</h1>
  <p>~目まぐるしい仕様の変遷～</p>
</div>

<div class="header">
  <h1>HTMLにおける「副題」の書き方がいつの間にかまた変わっていた<br>
  <span>~目まぐるしい仕様の変遷～</span></h1>
</div>

今も古めのHTML指南のページではこういった記述が生き残っている例もありそうですが、もはやすべて時代遅れとなっています。

参考:

【HTML】2023年の今、hgroup は廃止？それとも使えるの？ – webfrontend.ninja

表題に英訳を添えたい場合にも適用可能

副題というより英語訳を添えたい場合にも、同様のコーディングが適用できるようです。

<hgroup>
<h1>
HTMLにおける「副題」の書き方がいつの間にかまた変わっていた
</h1>
<p lang="en">
How the Way to Write 'Subtitles' in HTML Has Changed Again
</p>
</hgroup>

参考情報

ここまで色々調べた結果をPerplexityのライブラリに遺しました。

https://www.perplexity.ai/search/zui-xin-nohtml-living-standard-_0F5bniyTqupqgAB9M7bxQ

おわりに

振り返ってみるとHTML5の時代は本当に酷かったですね。ユーザー不在の本家争いみたいなことはもう二度と起こさないでもらいたいものです。