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

質問

hタグは h1,h2,h3,h4 の順に書くべきだと分かってはおりますが、
例えば以下のように、大きいコンテンツの中でh2ブロック→h3ブロックと続き、
h2ブロックは、いわゆるコンテンツの中の序章です。
その際、序章の中の小見出し（<●●●>部分）のタグはどうするのが適当でしょうか。

<h2>の中にいきなり<h4>は変ですよね。
<h2>の中の見出しも<h3>でしょうか？
そうした場合、<h2>の中にある<h3>と後から出てくる<h3>ブロックが
同レベルだと認識されてしまいませんでしょうか。
それとも<p>、<strong>、<div>等が適当でしょうか？

--------------------------------------
<h1>第1の見出し</h1>

<div id="contents">

　<div class="section">
　　<h2>第2の見出し</h2>
　　<●●●>第2に関連する小見出し</●●●>
　　　<p>テキストテキストテキスト</p>
　　<●●●>第2に関連する小見出し</●●●>
　　　<p>テキストテキストテキスト</p>
　</div>

　<div class="section">
　　<h3>第3の見出し</h3>
　　　<p>テキストテキストテキスト</p>

　　<h3>第3の見出し</h3>
　　　<p>テキストテキストテキスト</p>
　</div>

</div>
--------------------------------------

検索してもみたのですが「hタグは順番通りに書くべし」といった記事ばかり引っかかり
うまく見つけられませんでしたので、ここに質問させていただきます。

また、分かる方には基本なことかもしれませんが、
私も一応調べ、それでも分からなく質問しておりますので
「こんなこと基本的なこと」や「もっと勉強しろ」等の
攻撃的な文言は避けて頂きたくお願いします。

回答No.4

神崎 渉瑠（@taloo） · ベストアンサー

No.2です。

サブタイトル、小見出しであれば<h1-6>に含めれば良いですが、
導入句を<p>で書くと、本文の1段落目なのか、導入句なのかの区別がつきません。

<h1>見出し <span>小見出し</span></h1>
<p>導入句</p>
<p>本文・・・

そこで、見出しと導入句を<div>で囲ってグループ化させます。

<div>
　<h1>見出し <span>小見出し</span></h1>
　<p>導入句</p>
</div>
<p>本文・・・
<p>本文・・・

このままでは見出しと本文が別のグループに入っているように見えます。
そこで、全体を１つのグループ化させます。

<div>
　<div>
　　<h1>見出し <span>小見出し</span></h1>
　　<p>導入句</p>
　</div>
　<p>本文・・・
　<p>本文・・・
</div>

さらに、各グループの呼び名を明示して完成です。
（必要があればフッター（footer）、補足・注釈（aside）などを追加）

<div class="section">
　<div class="header">
　　<h1>見出し <span class="subtitle">小見出し</span></h1>
　　<p class="introduction">導入句</p>
　</div>
　<div class="main">
　　<p>本文・・・
　　<p>本文・・・
　</div>
</div>

近い将来、本文を囲むグループに正式な名称（<main>タグ）ができるかもしれません。

回答No.6

神崎 渉瑠（@taloo）

> <h2>の中にいきなり<h4>は変ですよね。
劇的かどうかはわかりませんが、本来、国語や英語、小説では、

見出し１
　見出し２
　　見出し３
　　見出し４
　見出し５

と、区分（セクション）でわけていくと、勝手に「章」「節」「項」と別れてしまいます。

見出し１
　　見出し２
　　見出し３
　　見出し４

このように、２つめの見出しを２段下げて書いてみても、デザイン的に２段下がっているだけで、
それは「項」ではなく、「節の見出し」ということになります。
（2段階入れ子にしたセクションを1回の入れ子で入れる事はできませんから、（日本語での呼び方として）1段階下げた呼び方をする事になります。）

せいぜい、見出しなしで小さなセクションを作り、その中にさらに小さなセクションを入れ子にできる程度です。

見出し１
　（見出しのない区分の本文）
　　見出し２
　見出し３
　見出し４

その国語や英語のルールをもとに、XHTML2（この規格は消滅しました）では、「ここからここまでが見出しである」という意味のタグ<h>があります。

<section>
<h>見出し１</h>
　<section>
　<h>見出し２</h>
　　<section>
　　<h>見出し３</h>
　　</section>
　　<section>
　　<h>見出し４</h>
　　</section>
　<h>見出し５</h>
　</section>
</section>

また、HTML5でも同様の方法として、<h1>だけでタグ付けができます。

<section>
<h1>見出し１</h1>
　<section>
　<h1>見出し２</h1>
　　<section>
　　<h1>見出し３</h1>
　　</section>
　　<section>
　　<h1>見出し４</h1>
　　</section>
　<h1>見出し５</h1>
　</section>
</section>

これらには「見出しのレベル」という概念はありませんので、
先に書いたように、「節（<h2>に相当する部分）」という区分をつくらずに、それより小さな「項（<h3>に相当する見出し）」を作る事はできません。
国語の書き方と同様に、単純に、「セクションが入れ子になっているから、その入れ子の度合いと同じレベルの見出しである」という意味になります。

この入れ子の度合いを、わざわざ明示しているのが<h2-6>です。

お礼

こちらの説明のお陰で霧が晴れたような気持ちです。
色々と詳細説明を頂きましてありがとうございました。

回答No.5

tracer

HTML4なのかHTML5なのかで考え方が大きく変わります。
ここではhtml5について書きますね。

><h2>の中にいきなり<h4>は変ですよね
これは、変というより、文法的に誤りです。

>hタグは順番通りに書くべし
基本はそうですが、HTMLの登場順で考えると、h1の後にh1が来る可能性があります。主さんの言うところの「レベル」とは、hタグで決定されるわけではありません。<section>タグなどの意味のあるタギングでレベルが認識されます。主さんがちゃんとした論理構造を書きたいという前提ならば「html5 アウトライン」で検索してみてください。劇的に考え方が変わるはずです。

お礼

「html5 アウトライン」で検索し色々ヒットしました。
実はXHTMLで書いていた（のを修正していた）のでHTML5ではなかったのですが、確かにHTML5の構造が参考になります。
ご回答ありがとうございました。

回答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>

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

回答No.2

ORUKA1951

常に「あなたが機械(コンピューター)であって、自動的に文書構造から目次--アウトライン--を作成する作業をする」と考えれば良いです。詳しくはHTML5の<section>要素と<hn></hn>要素の説明を読無と良いです。策定中のHTML5の仕様はHTML4.01で作成する場合にとっても良い参考になります。
・「id属性及び class属性と併用することで、文書に構造を付加する(HTML4.01 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」
・「HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。(HTML5における・・ http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」
　以下HTML5風に記述すると下記になります。HTML4.01の場合はそれぞれ<div class="header><div class="section">にすると考える。

<body>
　<header>
　　<h1>ページタイトル</h1>
　　・・・・・・
　</header>
　<section>
　　<h2>本文見出し</h2>
　　・・・・・
　　<section>
　　　<h3>1節見出し</h3>
　　　・・・・・・
　　</section>
　　<section>
　　　<h3>2節見出し</h3>
　　　・・・・・・
　　　<section>
　　　　<h4>2節1項見出し</h4>
　　　　・・・・・・
　　　</section>
　　　<aside>
　　　　<h4>補足記事</h4>
　　　　・・・本文と直接関係しない・・・
　　　　・・・アウトラインを構成しない・・
　　　</aside>
　　</section>
　</section>
　<footer>
　　<h2>文書情報</h2>
　</footer>
</body>
になりますね。

＞そうした場合、<h2>の中にある<h3>と後から出てくる<h3>ブロックが同レベルだと認識されてしまいませんでしょうか。
　そうなります。見出しの階層ではなく、sectionの階層に従いますから、
<body>
　<header>
　　<h1>ページタイトル</h1>
　　・・・・・・
　</header>
　<section>
　　<h1>本文見出し</h1>
　　・・・・・
　　<section>
　　　<h1>1節見出し</h1>
　　　・・・・・・
　　</section>
　　<section>
　　　<h1>2節見出し</h1>
　　　・・・・・・
　　　<section>
　　　　<h1>2節1項見出し</h1>
　　　　・・・・・・
　　　</section>
　　　<aside>
　　　　<h1>補足記事</h1>
　　　　・・・本文と直接関係しない・・・
　　　　・・・アウトラインを構成しない・・
　　　</aside>
　　</section>
　</section>
　<footer>
　　<h1>文書情報</h1>
　</footer>
</body>
と記述しても等価とされます。
--As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:( http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements )--
⇒4.3.6 The h1, h2, h3, h4, h5, and h6 elements( http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements )
　に同様のサンプルがあります。

　それと、見出し要素をどのサイズで表示するかはプレゼンテーション--スタイルシートに関わる問題ですから、分けて考えます。

★HTML4.01版だと、見出し<h1～h6>は順序どおり書くことが推奨されますので・・
<body>
　<div class="header">
　　<h1>ページタイトル</h1>
　　・・・・・・
　</div>
　<div class="section">
　　<h2>章見出し</h2>
　　<div class="section abstract">
　　　<h3>要約</h3>
　　　<p>この章の要約</p>
　　</div>
　　<div class="section">
　　　<h3>1節見出し</h3>
　　　・・・・・・
　　</div>
　　<div class="section">
　　　<h3>2節見出し</h3>
　　　・・・・・・
　　　<div class="section">
　　　　<h4>2節1項見出し</h4>
　　　　・・・・・・
　　　</div>
　　　<aside>
　　　　<h4>補足記事</h4>
　　　　・・・本文と直接関係しない・・・
　　　　・・・アウトラインを構成しない・・
　　　</aside>
　　</section>
　　<div class="section summary">
　　　<h3>まとめ</h3>
　　　<p>まとめ</p>
　　</div>
　</div>
　<div class="footer">
　　<h2>文書情報</h2>
　</div>
</body>
　そのうえで、abstractやsummaryのフォントを少し小さくしたければ、
div.section.abstract,div.section.summary{font-size:0.95em;}
とでもすれば良いです。
　HTML自体、科学関係が出所ですから、科学技術論文のセオリー--Tex的な記述が参考になるでしょう。

お礼

HTML4.01版の説明が大変参考になりました！
ご回答ありがとうございました。

回答No.1

神崎 渉瑠（@taloo）

第1、第２という呼び方ではなく、
巻、章、節、項、というレベル分けをしてみてください。
同じレベルの物は、<h1>、<h2>のレベル（数字）が同じになります。

<h1>第１巻の見出し</h1>
　<h2>第１章の見出し</h2>
　<h2>第２章の見出し</h2>
　　<h3>第１節の見出し</h3>
　　　<h4>第１項の見出し</h4>
　　<h3>第２節の見出し</h3>
　<h2>第３章の見出し</h2>
　　<h3>第１節の見出し</h3>
　　<h3>第２節の見出し</h3>

----------------
上記を（わかりにくくなるように）書き換えると以下のようになりますが、
章の区切り、節の区切りなどは<h1～6>で区別できます。

<h1>見出し１</h1>
<h2>見出し２</h2>
<h2>見出し２</h2>
<h3>見出し３</h3>
<h4>見出し４</h4>
<h3>見出し３</h3>
<h2>見出し２</h2>
<h3>見出し３</h3>
<h3>見出し３</h3>

---------------
>そうした場合、<h2>の中にある<h3>と後から出てくる<h3>ブロックが
>同レベルだと認識されてしまいませんでしょうか。

同じタグがついていれば、同じレベルだと認識されます。
違うレベルと認識してほしいのであれば、違うレベルのタグを付けてください。

補足

ありがとうございます。
巻、章、節、項、という分け方は分かりやすいですね。

ただ以下の様に、第２章の中で小見出しを付ける場合（<●●●>部分）、
talooさんでしたらどうされますでしょうか？
↓勝手ながらtalooさんがご記入いただいたソース追加させていただきました。

---------------------------------------
<h1>第１巻の見出し</h1>

　<h2>第１章の見出し</h2>

　<h2>第２章の見出し</h2>
　<●●●>第２章の説明文に対する小見出し</●●●>
　<p>第２章の説明文</p>
　<●●●>第２章の説明文に対する小見出し</●●●>
　<p>第２章の説明文</p>

　　<h3>第１節の見出し</h3>
　　　<h4>第１項の見出し</h4>
　　<h3>第２節の見出し</h3>

　<h2>第３章の見出し</h2>
　　<h3>第１節の見出し</h3>
　　<h3>第２節の見出し</h3>