見出し要素の順序について

見出しはHTML文書の構造を示すための重要な要素ですから、内容のアウトラインを適切に反映するよう、正しい順序で使うべきです。W3CのHTML仕様書では、この点は注として触れられているのみですが、正規の規定として文書化する、特殊な要素型を導入して機械的なチェックを可能にするという試みもあります。

HTMLの見出し要素

HTMLは階層的に文書構造を表すようには設計されていないため、見出しをh1要素から順番に使って、そのレベルによって文書がどんなアウトラインで成り立っているのかを示すことが重要です。見出しレベルの適切な使い方は、見出し要素を抽出して階層型の目次を作成することを考えると分かりやすいでしょう。

W3CのHTML4仕様書[HTML4]では、控えめながら次のように述べられています。

Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped. (7.5.5 Note)

規定要件による見出し順序の制約

フラットな構造のHTMLのままでこの制約を課したモデルをつくるのは困難ですが、仕様書でnormative requirementsとして定義すれば、それは正規の制約となります。この方法の例としてはISO/IEC 15445[ISO15445]のDTDコメントがあります。

The comments in the DTD which use the expressions "shall" or "shall not" are normative requirements of this International Standard.
(9.3 Comments in the DTD)

--The H1 element shall not be followed by an H3, H4, H5 or H6 element
without an intervening H2 element.
...
An H6 element shall be preceded by an H5 element
--
(A DTD comment in Annex B Part 3)

DTDによる見出し順序の制約

この制約をパーサでもチェックできるようにするには、DTDの内容モデルでその順序を定義する必要があります。ISO/IEC 15445の検討過程ではこうしたモデルが採用され、たとえば1997年10月のFinal CD[FCD97]では次のようなDTDが示されています。

<!ELEMENT BODY   - O  (%section.content;, (H1,DIV1)* ) +(DEL|INS) >
<!ELEMENT H1     - -  (%text;)+ >
<!ELEMENT DIV1   O O  (%section.content;, (H2,DIV2)* ) >
<!ELEMENT H2     - -  (%text;)+ >
<!ELEMENT DIV2   O O  (%section.content;, (H3,DIV3)* ) >
...

W3CのHTMLにはない(開始、終了タグ共に省略可能な)DIV1DIV6という要素型を導入することで、見出し順序を正しく記述しない文書はDTDに適合しないよう規定できるわけです。ただし、このモデルでは、文書末尾にナビゲーションやフッタを置く場合、そのための見出しが必要になります(でないと直前の見出しセクションの一部となる)。

ISO/IEC 15445は最終的に1997年の委員会[N1944]でW3CのHTML4のサブセットとすることが求められたため、この規定は条件付きマーク区間内でInformativeなものに変更されました。ユーザーガイド[15445UG]に示されているように、文書のルート要素をHTMLではなくPre-HTMLとし、パラメータ実体%Preparation;INCLUDEとすることで、このマーク区間を一時的に有効にしてパーサに見出し順序を検証させることができます。

なお、この仕組みの副作用から、ISO/IEC 15445では見出し要素をBODYの直下にしか書くことができません。

ISO/IEC 15445での文書構造

見出し要素Hnとセクションボディ要素DIVnが並列で並ぶため、ISO/IEC 15445では見出しはセクションに含まれないと勘違いしてしまうことがあるようですが、ユーザーガイド13.11.2の図を見ても明らかなように、セクションとは見出しを含む概念です。

[ISO/IEC 15445] considers that the <H1> element specifies the beginning of a major section of a document and contains the title of that major section. (13.11)

1997年2月の文書[N1898]では、編集者がISO/IEC 15445で文書構造を表現する方法として、2つのオプションを提案しています。その一つは、上記のように見出し要素とセクションボディ要素(当時はBxと呼ばれていた)で構造を表す「単純構造化」を合わせて示す方法、もう一つはセクション要素Sxを導入して、明確に構造を示す「フル構造化」です。

... a section is assumed to contain two parts: a heading represented by an <Hx> tag and a body represented by a <Bx> tag. Section elements <Sx> may also be defined which contain matching head and body tags. The simple structuring option uses only the <Hx> and <Bx> elements, whereas the full structuring option uses all three tags.(Document Sections)

XHTML 2.0での文書構造と見出し

XHTML 2.0の草案[XHTML20]では、sectionhという新しい要素型が導入され、入れ子によって文書構造を示すことができるようになりました。

<body>
<h>Events</h>
<section>
    <h>Introduction</h>
    <p>....</p>
    <h>Specifying events</h>
    <p>...</p>
    <section>
        <h>Attaching events to the handler</h>
        <p>...</p>
    </section>
    <section>
        <h>Attaching events to the listener</h>
        <p>...</p>
    </section>
    <section>
        <h>Specifying the binding elsewhere</h>
        <p>...</p>
    </section>
</section>

body要素直下にあるh要素が従来のh1に、最初のsection要素内に直接現れるh要素がh2に、section要素の子要素である(第2レベルの)section要素内のh要素がh3に…という具合に、入れ子レベルで見出しの段階と文書の構造が示されます。それぞれの見出しの視覚表現は、文脈セレクタを用いたスタイルシートでコントロールすることが可能です。

ただし、同じ名前の要素(タグ)を入れ子にするのは、table要素などの入れ子と同様、一般のテキストエディタでの編集やメンテナンスが複雑になる可能性があります。XHTML2対応エディタを利用したり、最終出力のみをXHTML2に変換するなどの工夫がないと、扱いにくいかも知れません。

XHTML 2.0ではp要素内にリストなどを持つことも認められ、文書構造の記述という点ではHTMLの抱えてきた制約をかなり取り払うものになっています。一方、これらの大きな違いがあるため、従来のブラウザとの互換性は完全には保証されず、HTMLによく似た別の言語というべきかも知れません。

(h1〜h6要素型も残されており、作者はどちらかの見出し要素を選択して利用することができます)

参照文献

[HTML4]
Dave Raggett, et al., HTML 4.01 Specification, , W3C Recommendation
<http://www.w3.org/TR/html4>
[ISO15445]
ISO/IEC JTC1/SC34 (Roger Price, David Abrahamson, ed.), Information technology - Document description and processing languages - HyperText Markup Language (HTML), , ISO/IEC 15445:2000/DCOR 1:2001(E)
<http://purl.org/NET/ISO+IEC.15445/15445.html>
[15445UG]
Roger Price, David Abrahamson, User's Guide to ISO/IEC 15445:2000 HyperText Markup Language (HTML),
<http://purl.org/NET/ISO+IEC.15445/Users-Guide.html>
[FCD97]
ISO/IEC JTC1/WG4 (Roger Price, David Abrahamson, ed.), Information technology - HyperText Markup Language, , Final CD 15445 - Work in Progress
<http://www.ornl.gov/sgml/wg8/document/1935.sgm>
[N1898]
Roger Price, David Abrahamson, HTML Structuring Options, , Committee Draft proposal
<http://www.ornl.gov/sgml/wg8/document/1898.htm>
[N1944]
ISO/IEC JTC1/WG4, Instructions to the editors of ISO/IEC 15445, , WG4 Document
<http://www.ornl.gov/sgml/wg8/document/1944.htm>
[XHTML20]
Jonny Axelsson, et al., XHTML 2.0, , W3C Working Draft
<http://www.w3.org/TR/2002/WD-xhtml2-20020805/>