タグ別アーカイブ: HTML5のh1

HTMLを簡単に作る方法：h1要素の話(3) WHATWGのHTML5にみるセクションの深さと見出しランク

投稿日時: 投稿者:
1

前回[1]は、W3CのHTML5.1では、セクションの階層の深さと見出しのランクが一致するように変更になったことを説明しました。HTML5についてはWHATWGでも仕様を公開しています[2]。この最新版（Last Updated 12 April 2017）で、セクション階層と見出しのランクについてどのように記述されているかを調べてみました。

WHATWGの仕様説明

4.3.3 The section elementの最初の例では、トップレベルの見出し(A)、第二階層（sectionで囲まれている）の見出し（B、C）はh1です。

<article>
　<hgroup>
　　<h1>A</h1>
　　<h2>…</h2>
　</hgroup>
　<p>…</p>
　<section>
　　<h1>B</h1>
　　<p>…</p>
　</section>
　<section>
　　<h1>C</h1>
　　<p>…</p>
　</section>
</article>

この例説明には、セクションがトップレベルか、第二階層か、第三階層かを気にすることなく、h1タグを使うことができるとなっています。前回調べたW3CのHTML5.1とは考え方が相反しています。

4.3.6 The h1, h2, h3, h4, h5, and h6 elements
h1～h6が見出しのランクを意味すると説明されています（W3Cと同じです）。アウトラインについては、見出しランクによる暗黙の階層のレベルとセクションによる階層と両者を混用したものが同じである、ということです。

<body>
　<h1>A</h1>
　　<h2>B</h2>
　　<h2>C</h2>
　　<h2>D</h2>
　　　<h3>E</h3>
　　<h2>F</h2>
</body>

<body>
　<h1>A</h1>
　<section>
　　<h1>B</h1>
　</section>
　<section>
　　<h1>C</h1>
　</section>
　<section>
　　<h1>D</h1>
　　<section>
　　　<h1>E</h1>
　　</section>
　</section>
　<section>
　　<h1>F</h1>
　</section>
</body>

<body>
　<h1>A</h1>
　<section>
　　<h2>B</h2>
　</section>
　<section>
　　<h2>C</h2>
　</section>
　<section>
　　<h2>D</h2>
　　<section>
　　　<h3>E</h3>
　　</section>
　</section>
　<section>
　　<h2>F</h2>
　</section>
</body>

このあたりは、W3CのHTML5のままになっていると言えます。

4.3.11 Headings and sections　には次のような記述があります。

“The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one.”

（日本語訳）[3]より引用
「セクショニングコンテンツの要素においてヘディングコンテンツの最初の要素は、そのセクションの見出しを表す。同等以上のランクに属する後続の見出しは、新しい（暗黙の）セクションを開始し、低いランクの見出しは、前のセクションの一部である暗黙のサブセクションを開始する。どちらの場合も、要素は暗黙のセクションの見出しを表す。」

問題点
この説明によれば、単純に考えるとsection要素の先頭に一番ランクの高い見出しを置かなければならないという制約を生み、body（セクションルート）やsection要素の先頭の見出しはh1にリセットされるということを意味します。

つまり、HTML5では

セクション開始
h2中見出し
テキスト
h1大見出し
テキスト
セクション終了

というような見出しの付け方はできないということになりそうです。このような見出しの付け方をすると、HTML5の解釈によるアウトラインは、中見出しが最上位階層、大見出しがその下の階層となります。

う～ん。このような考え方では本のコンテンツを記述するのは難しいかもしれません。それとも、セクション開始の先頭には省略されたh1タグがあって、その次のh2中見出しはh1のサブセクションである。そしてその次のh1はh2の作るサブセクションの親である、という解釈はできるのでしょうか？　それができるなら、アウトラインの階層と見出しの階層が一致します。さて、ちょっとやっかいです…

[1] HTMLを簡単に作る方法：h1要素の話(2) HTML5.1 (W3C）では、セクションの深さと見出しのランクは同じとなった
[2] HTML Living Standard
[3] 4.3.11 見出しとセクション

■連載
(1) ワンソースマルチユースの課題：HTMLソースのオーサリング問題を改めて考えてみようと。
(2) HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。
(3) Word2013のWord文書をHTML形式で保存を試してみる。その問題点は？
(4) HTMLを簡単に作る方法：h1要素の話(1)
(5) HTMLを簡単に作る方法：h1要素の話(2) HTML5.1 (W3C）では、セクションの深さと見出しのランクは同じとなった（前回）
(6) HTMLを簡単に作る方法：h1要素の話(3) WHATWGのHTML5にみるセクションの深さと見出しランク（前回）