hタグを使わずに小見出し

質問

• hタグを使わずに小見出しについて質問しています。hタグは順番通りに書くべきか悩んでおり、適切なタグについて知りたいと思っています。
• 質問文章では、h2やh3タグを使用せずに小見出しを表現しています。どのようなタグが適切か迷っており、調べても情報が見つからなかったため、質問させていただいています。
• hタグを使用せずに小見出しを表示する方法について質問しています。h2やh3タグのような明示的な見出しタグを使用するべきか、それとも他のタグを使うべきか迷っているので、アドバイスがほしいです。

回答No.3

神崎 渉瑠（@taloo）

サブタイトル、小見出しに相当するものであれば<h1-6>に含めて、デザイン的な変更が必要であれば<span>で記述します。
キャッチコピーや概要、紹介文、導入句などに相当する物であれば、<p>で記述します。
導入句か小見出しかの区別がかなり曖昧だとは思いますが、SEOの問題もありますので、サブタイトルだけど<p>にする、導入句だけど<h1>に含める、ということもありえます。

<h1>でも<h2～6>でも基本は同じですので、<h1>で例えます。

------------------
<h1>どらえもん のび太と竜の騎士</h1>

------------------
<h1>どらえもん ～のび太と竜の騎士～</h1>

------------------
<h1>どらえもん：のび太と竜の騎士</h1>

------------------
<h1>どらえもん <span>～のび太と竜の騎士～</span></h1>

-----------------
<h1>どらえもん <br>
<span>～のび太と竜の騎士～</span></h1>

-----------------
<style>
h1 br {
display: none;
}
h1 span:before,
h1 span:after {
content: "～";
}
</style>

<h1>どらえもん <br>
<span>のび太と竜の騎士</span></h1>

------------------
<h1>劇場版TRICK <span>霊能力者バトルロイヤル</span></h1>
<p class="catchcopy">命がけのバトルロイヤル 生き残れるのはたった一人!?</p>

------------------
イントロダクションがタイトル・見出しより前に来る場合は、<div>で囲ってグループ化します。
（この程度ならスタイルシートで表示位置を入れ替える事もできますが。
<h1-6>が区切りの役目を持っていますので、特別に明示しなければならない理由や、デザイン的に必要でなければ<div>や<section>で区切る必要はありません。）

<div>
<p class="catchcopy">命がけのバトルロイヤル 生き残れるのはたった一人!?</p>
<h1>劇場版TRICK <span>霊能力者バトルロイヤル</span></h1>
<p>本文～</p>
</div>

------------------
HTML5解説サイトでhgroupが紹介されていると思います。

<hgroup>
<h1>ドラえもん</h1>
<h2>のび太と竜の騎士</h2>
</hgroup>

という書き方ができますが、hgroupは古いタグですので使わない方が良いです。
（新しいブラウザは<hgroup>を適切に解析、表示できます。）

結局の所、HTMLタグを使わずに「：」や「～」で区切るか、デザインを変えるのであれば<span>を使うことになりました。
つまるところ、HTMLにおいては、サブタイトル、小見出しという「概念」そのものがありません（hgroupの定義削除と同時になくなりました）。
http://www.w3.org/TR/html5/common-idioms.html#sub-head

==============
見出しと導入句が曖昧な物の例として。
私の解釈と作り方。

http://hpplus.jp/nonno/magazine/new
nonno 3月号

このデザインの場合は、
雑誌タイトルが『nonno』、雑誌サブタイトルが『2014年3月号』だと思うので、

HTMLの文法に厳格にするのであれば、

<h1>non no<span>2014 March</span></h1>
<p>春の早耳1500</p>

だと思いますが、
SEOを理由に、『3月号』はサブタイトルではなくフッター扱いにして、

<h1>non no <span>春の早耳1500</span></h1>
<footer>
<p>2014 March</p>
</footer>

という作り方にしてみます。