サブタイトルのマークアップ方法

Question

HTMLでホームページを作っているのですが、サブタイトルやキャッチコピーのマークアップ方法がわからず、質問しました。
HTML5でタイトルを作成する際、もっとも適切なサブタイトルまたはキャッチフレーズのマークアップ方法はどれなのでしょうか。
以下、自分で思いついた方法やインターネットで拾ってきた実装方法です。

<h1>タイトル</h1>
<h2>サブタイトル<h2>
<!--これより下層のタイトルがh3となってしまい、整合性が取れない-->

<hgroup>
  <h1>タイトル</h1>
  <h2>サブタイトル<h2>
</hgroup>
<!--hgroupはW3Cの勧告からは削除されている-->

<!--以下のいずれか-->
<h1>タイトル<br>サブタイトル</h1>
<h1>タイトル<br><small>サブタイトル</small></h1>
<h1>タイトル<br><span>サブタイトル</span></h1>
<!--サブタイトル自体はタイトルの一部ではないため、あまり適切ではない-->

<h1>タイトル</h1>
<p>サブタイトル</p>
<!--サブタイトルとその他の要素の区別がつかない-->

<header>
  <h1>タイトル</h1>
  <p>サブタイトル</p>
</header>
<!--ヘッダーの中に他の要素もある場合、サブタイトルとその他の要素の区別がつかない-->

他にも実装方法があると思います。

どの方法が最も適切なのでしょうか。

主に参考にしたホームページ:
HTML5日本語訳 4.12 専用要素なしの一般的語彙
サブタイトルを伴う見出しのマークアップ

Answer 1

良い機会だったので少し勉強してみました。以下は主観を交えてのコメントになります。

とりあえず結論

一般論的なルールは与えられていても、何をそのルールに当てはめるかは結局作り手が判断するしかありません。
究極的には、「作り手のポリシーに依存し、絶対的な正解はない」となると思います。

そのうえで、私の感覚で一番しっくりくるコードはというと、<h1>タイトル<br><small>サブタイトル</small></h1>ですね。

でも質問者氏におかれては、以下が要求に合致しているのかなと思います。

<hgroup>
<h1>タイトル</h1>
<h1>サブタイトル</h1>
</hgroup>

サブタイトルとは何か

本件では「サブタイトル」をどう捉えるかが問題になると思います。

サブタイトルは私からすれば疑いようもなくa part of titleなので、hタグでくくるのが最も妥当と思います。HTML5ではhタグの下に事実上あらゆるタグが置けるようになったようなので、堂々とこういう形にしたい。

ですが、質問者氏は「サブタイトル自体はタイトルの一部ではないため、あまり適切ではない」と仰っているので、明らかに私とはサブタイトルの捉え方が違います。

そこで本家はどう言っているのか見てみたところ、

ここでは、妥当な見出しの例をいくつか示す。

<hgroup>
 <h1>The reality dysfunction</h1>
 <h2>Space is not the only void</h2>
</hgroup>

<hgroup>
 <h1>Dr. Strangelove</h1>
 <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>

さらには

次の2つの例は、2つのh1の見出しが同じ映画に米国と英国の名前をグループするためにhgroup要素内で使用することができる方法を示す。

<hgroup>
 <h1>The Avengers</h1>
 <h1>Avengers Assemble</h1>
</hgroup>

<hgroup>
 <h1>Avengers Assemble</h1>
 <h1>The Avengers</h1>
</hgroup>

どうやら「2番目のh1」は自動的に補助的なタイトル（原文だとsubheadings or subtitles or (secondary) alternative titles）扱いになるらしいです。この「補助的なタイトル」はたぶん質問者氏のサブタイトルの位置づけに合致しているでしょう。

複雑なことは考えたくない

なお、セマンティクスやSEOに配慮することは大切ですが、だからといって余りに複雑なコードとすべきではないとも思います。セマンティックスを勉強してすこし意識ができてくると、いろいろ考えすぎてとてつもなく複雑な論理を実装してみたくなったりしますが、受け手に理解してもらえなければ意味がありません。そのうち自分でも組み立てた論理を忘れてしまってあとで見返すときにやたら面倒だったりします。

上に述べたhgroupまわりのコードの意味するところ（さらにhgroupの機能やh1/h2のつかいわけ）について、当該の文章中で詳しく説明されているのですが、正直言って私はスッと理解することは出来ません。このHTML記述ルールに大幅な改善・改定が施されない限り、私自身がこのスタイルを採用することはないでしょう。今の所hederとかhgroupはただ冗長としか思えません。

Comments

[ex025]

ありがとうございます。勉強になりました。
今回は、サイトのデザインなども考慮し、hgroupを採用することにしました。
周囲の要素との関連性も考慮しての判断です。
今後、サイトの構造によってはまた違う方法を採用するかもしれないので、この回答はとても参考になります。ありがとうございました。

Answer 2

最も適切

ないと思います。
「どう見せたいか」になるのではと。
「何がサブタイトルか」というところ、定義自体もアプリケーションやサイトによって違います。

Comments

[ex025]

確かに、デザインや周囲の要素との関連、サブタイトルの位置付けなどで最も良い実装方法は異なります。
今回は、そのようなことも考慮し、hgroup要素を採用しました。
ありがとうございます。

[m.ts10806]

>hgroup要素を採用しました。

「削除される可能性が低い」とリファレンスに書いてあるとはいえ、W3Cの勧告には従った方がいいのでは・・・。

[ex025]

HTML5の標準はW3CではなくWHATWGであり、WHATWGはhgroup要素を削除していないため、当面の使用には問題ないと判断しました。
現在開発中のサービス自体長期的に運用するものではないため、意味を優先しても問題ない、との判断です。
ある程度長期的に運用する場合は、他の実装方法を採用すると思います。