雑記

◆ HTML5のセクションと見出し

出張に向かう電車の中で「9784822284220」を読んでいたんですが、第5章のsectionタグとh1〜h6による見出しとの関係に強い違和感が…。

例えば、Wikiスタイルで

! 見出し1
ああああ
!! 見出し2
いいいい

という記述は、

<h1>見出し1</h1>
<p>ああああ</p>
<h2>見出し2</h2>
<p>いいいい</p>

のように変換されますが、これはこのままでHTML5としても正しいようです。ただ、内部的(?)には見出しのレベルを変更すると暗黙の<section>が生成され、上記のソースは

<section>
  <h1>見出し1</h1>
  <p>ああああ</p>
  <section>
    <h2>見出し2</h2>
    <p>いいいい</p>
  </section>
</section>

と等価になり、さらにこれは、

<section>
  <h1>見出し1</h1>
  <p>ああああ</p>
  <section>
    <h1>見出し2</h1>
    <p>いいいい</p>
  </section>
</section>

とも等価になるんだそうです。この例だけ見ると、セクションとその見出しの関係を一見うまく表現できているように見えますが、実はHTML5のウリであるはずの「前方互換性」がかなり怪しくなっています。

例えば、

! 見出し1
ああああ
!!! 見出し2
いいいい

というレベルを飛ばすような記述は、同じように変換すると

<h1>見出し1</h1>
<p>ああああ</p>
<h3>見出し2</h3>
<p>いいいい</p>

となります。ここで、HTML4とHTML5でスタイルに互換性を持たせるためには、

<section>
  <h1>見出し1</h1>
  <p>ああああ</p>
  <section>
    <section>
      <h3>見出し2</h3>
      <p>いいいい</p>
    </section>
  </section>
</section>

としなければならないばずなのですが、「暗黙の<section>」は見出しのレベルの差に関係なく1つしか入らないようなので、実際には

<section>
  <h1>見出し1</h1>
  <p>ああああ</p>
  <section>
    <h3>見出し2</h3>
    <p>いいいい</p>
  </section>
</section>

と等価になり、さらにこれは

<section>
  <h1>見出し1</h1>
  <p>ああああ</p>
  <section>
    <h2>見出し2</h2>
    <p>いいいい</p>
  </section>
</section>

や

<section>
  <h1>見出し1</h1>
  <p>ああああ</p>
  <section>
    <h1>見出し2</h1>
    <p>いいいい</p>
  </section>
</section>

などとも意味的には等価でHTML5に準拠したブラウザではこれらを同じように表示することが期待されているようです。

4.4.11 Headings and sections

で、これって

• あるタグ(h1)が、他のタグ(section)の影響を受けてスタイルが変わる
• 逆に違うタグ(上の例ではh4とh1)を記述しても、sectionの段数が同じならそれらの違いは無視されて同じスタイルが適用される
• 暗黙のセクションが1段だけ入るというルールが、さらに事態をややこしくしている

ということになり、この理解が正しいなら、CSSでスタイルを記述するのが難しい、かなり筋が悪い仕様だと言わざるを得ません。

もし仮に上のようなHTML4とHTML5の仕様の違いをhikidocなどの生成系の方で吸収しようとすると、

• 最後に出てきた見出しのレベルを記憶しておく
• 見出しを読み込んだら最後の見出しとのレベルの差を計算してsectionタグを入れ子にする

といった実装になるんでしょうが、状態を記憶しておかなければならないようなデザインにせざるを得ないような仕様というのは今時どうなんでしょう？

いっそのこと

• h1〜h6は全て廃止（あるいはHTML4との互換性が完全に保てる形で残す）
• セクションの入れ子関係は<section>タグで表現する
• セクションのタイトルは<title>(<t>)タグ、サブタイトルは<subtitle>(<subt>)タグを使う

とかにしてくれればいいのにとか思いました。