【HTML5】標準規格というものに失望した話

もう結構経ってしまいましたが、2022年7月、HTMLの標準規格に割と大きな変更が加えられました。アウトラインアルゴリズムの削除です。アウトラインアルゴリズムは過去のHTML4系との差異の中でも特に素晴らしい機能だったのですが、なくなってしまいました。この規格の退化とも言える変更はなぜ起きてしまったのでしょう？

素晴らしかったHTML5の見出しシステム

アウトラインアルゴリズムは、HTML文書の見出し構造を決めるアルゴリズムです。HTML5より前では見出し要素h1からh6を使って文書構造を表現しました。

HTML5より前

<h1>第1章</h1>
<h2>第1章第1節</h2>
<h3>第1章第1節第1項</h3>
<h3>第1章第1節第2項</h3>
<h2>第1章第2節</h2>
<h2>第1章第3節</h2>

それに対してHTML5以降では新たに<section>や<article>要素等を導入し、見出し構造を別の形でも表現できるようにしました。例えば以下のように。

HTML5で追加されていた書き方、今はもうダメ

<section>
  <h1>第1章</h1>
  <section>
    <h1>第1章第1節</h1>
    <section>
      <h1>第1章第1節第1項</h1>
    </section>
    <section>
      <h1>第1章第1節第2項</h1>
    </section>
  </section>
  <section>
    <h1>第1章第2節</h1>
  </section>
  <section>
    <h1>第1章第3節</h1>
  </section>
</section>

この二つは同じ文書構造を表していました。注目すべきは各見出しの内容の範囲が<section>要素で囲まれていること、そして見出しを表現する要素が<h1>で統一されていることです。

この新しい表現方法は何が良かったのでしょう？それは各見出しの内容の範囲が<section>要素の入れ子によって分かりやすくなったこと、そして各見出しが上から何レベル目なのかに関わらず常に<h1>を使えば良かったという点です。これらはHTMLをより小さなパーツの集合として構成するコンポーネント志向を実践する上で非常に便利な特徴でした。

例えばECサイトにおいて商品一覧等で利用する商品アイテムコンポーネントがあったとします。イメージとしてはこんなの（NTT-X Storeより）。

この並んだ各商品の部分、普通はコンポーネント化しますよね？問題はその各商品をそれぞれセクションにしようと思ったときです。例えば以下のような形にすれば綺麗にマークアップできそうです。

Itemコンポーネント

<section>
  <h1>商品名</h1>
  <img src="商品画像.jpg" alt="" />
  <p>999999円</p>
  <a>詳細</a>
</section>

アウトラインアルゴリズムがあれば上の書き方でOK、なんの問題もありません。しかし、アウトラインアルゴリズムが削除された現状のHTML5ではこれではダメです。このコンポーネントが使われる所を再現すると例えば、以下のようになります。

<h1>商品一覧</h1>
<section>
  <h1>Surface Laptop Go 2</h1>
  <img src="商品画像1.jpg" alt="" />
  <p>100000円</p>
  <a>詳細</a>
</section>
<section>
  <h1>MacBook Air</h1>
  <img src="商品画像2.jpg" alt="" />
  <p>200000円</p>
  <a>詳細</a>
</section>

この文書はアウトラインアルゴリズムがある過去のHTML5なら「商品一覧」セクションの中に二つのサブセクションがある文書を表していました。

└ 商品一覧
  ├ Surface Laptop Go 2
  └ MacBook Air

しかし、アウトラインアルゴリズムのない現状のHTML5では全ての<h1>が並列に扱われます。

├ 商品一覧
├ Surface Laptop Go 2
└ MacBook Air

これでは正しい文書構造を表現できていません。この場合に限れば「商品名」の部分を<h2>で囲めば良いわけですが、このItemコンポーネントは必ずしも、上位から2段目のセクションとして使われるとは限りません。例えば下のような見出し構造の中で使われることも普通にありえます。

└ 商品一覧
  ├ Surface シリーズ
  │ └ Surface Laptop Go 2
  └ MacBook シリーズ
    └ MacBook Air

この場合、「商品名」の部分は<h3>でくくる必要があります。このようにこのコンポーネントを再利用しようと思っても、どの見出しレベルで使われるかによって<h1>から<h6>を変える必要が出てきます。アウトラインアルゴリズムがあれば全部<h1>にすれば良いので、コンポーネント化がとてもやりやすかったのです。

なぜ退化してしまったのか？

このような素晴らしいアウトラインアルゴリズムは現状のHTML5では削除され、実質古のHTML4の時代に戻ってしまいました。現在のWHATWGの規格で文書の見出し構造を表現するためには、<h1>から<h6>を使い分けるしか方法がありません。

私は悔しくて、なぜ削除されてしまったのか調べたのですが、一言で言えば普及しなかったのが原因のようです。

まずHTMLを書くウェブ開発者側みた場合、この機能はあまり知名度が上がりませんでした。インターネット上のウェブサイトでこの新機能を使って見出し構造を表現しているものは、まあ見たことなかったですね。おそらく開発者のほとんどが存在を知らない機能だったんじゃないかと思います。

またブラウザでの実装もされませんでした。実装というのは例えばブラウザのデフォルトのスタイルシートで、<h1>が<section>の入れ子の中にある場合に、その見出しレベルに応じてフォントの大きさを変えるとかです。

一番よくみた理由は読み上げソフトの実装対応です。視覚障害者向けのブラウザ読み上げソフトの対応が全く進まず、この書き方をしたHTMLはソフト利用者に混乱を与えることになるからやめろ、という話をよく目にしました。

標準規格というものは、普及しているルールをまとめたものであり、実際にはどこにも実装されていない機能を標準規格に書いておくのは適切ではない、といったコメントをみましたが、まさにそういうことのようです。

あとがき

このアウトラインアルゴリズムの削除を知ったときは非常に残念で、心底失望しましたね。そもそもこのアウトラインアルゴリズムは詳細をみていくと複雑すぎて、設計自体がよくなかったという話もあるようですが、でも完全に削除しちゃったのは本当に残念です。標準規格は理想を書く場所じゃなくて、ただ普及した機能をまとめることしかできないのかという失望ですね。