ol 要素に type 属性や start 属性を書くべきか

投稿

ol 要素(WHATWG)には type 属性があります。

これはHTML 3.2 で追加(W3C)され、HTML4 では非推奨(W3C)とされ、HTML5（2010年10月19日版）で復活(W3C)しています。

指定できる値は HTML 3.2 以降、一貫して 1, a, A, i, I の5種類ですが、その意味合いは HTML4 以前と HTML5 では大きく異なります。

HTML 3.2 と HTML4 では ul 要素や li 要素にも type 属性を指定することができたことからも分かるように、視覚的なレンダリングスタイルを指定する目的のもので、 HTML 4.01 では（Transitional DTD では使えたものの）スタイルシートを使うべきと書かれていました。

Note that the type attribute is deprecated and list styles should be handled through style sheets.

10.3.1 Visual rendering of lists(W3C)

これは文書構造とプレゼンテーションの分離(W3C)という HTML4 の思想からすれば正しいもののように思えますが、実際には問題点がありました。

例えばこんな設問があるとします。

<style>
ol {
  list-style: lower-latin; /* a, b, c, ... z */
}
</style>

<p>列車に乗る手順のうち、間違った箇所をひとつ選びなさい。</p>
<ol>
  <li>券売機できっぷを買う</li>
  <li>きっぷを自動改札機に通さず強行突破する</li>
  <li>プラットホームへ進む</li>
</ol>

多くの方は「b.」と答えるでしょうが、スタイルシートが無効な環境の人[1]は「2.」と答え、誤答と判断されてしまうかもしれません。ユーザースタイルシートを設定している人も、「b.」以外の答え方をする可能性があります。

また、ol 要素には start 属性で開始記号を指定することもできます。これも HTML4 では非推奨とされ、 HTML5 で復活したのですが、こちらもスタイルシートのみに頼るとマズい自体が発生します。

次のように ol 要素を分割したケースを考えてみます。

<style>
ol {
  counter-reset: li var(--before-count, 0);
}
li {
  list-style: none;
  counter-increment: li;
}
li::before {
  margin-right: .5em;
  content: counter(li) ".";
}
</style>

<h1>ソフトウェアのインストール</h1>
<p>まずはダウンロードします。</p>
<ol>
  <li><a href="https://example.com/download">ダウンロードページ</a>へアクセス</li>
  <li>OSを選択してダウンロード</li>
  <li>ダウンロードしたファイルを解凍</li>
</ol>
<p>次にインストールします。</p>
<ol style="--before-count: 3">
  <li>解凍したフォルダの中にある foo.exe を実行</li>
  <li>オプションを選択して「インストール」ボタンを押下</li>
</ol>

これをブラウザで表示させると、下画像のようにリストの番号は 1. 〜 3. と 4. 〜 5. で表示されます。

ブラウザで表示したスクリーンショットオリジナル画像

このページに関して、コメント欄やSNS等でこんな言及があるとします。

ここに書かれている手順は厳密には情報不足で、 Windows Vista 以降は手順 4. の後にUACのダイアログで「はい」を押す必要があるよ。

しかしスタイルシートが無効な環境、あるいは Internet Explorer を使っているユーザーは（IEはCSS変数を認識しないので）「手順 4.」を見つけることができません。

Internet Explorer 11 で表示したスクリーンショットオリジナル画像

さて、 type 属性と start 属性について2つの例を示しましたが、これらは何が問題だったのでしょうか。

「スタイルシート無効環境やユーザースタイルシートの考慮がされていない」や「IEはクソ」なども挙げられますが、本質的な原因は制作者はリストのマーカー記号をプレゼンテーションと判断してCSSで表現したが、ユーザーは文書構造と捉えているという食い違いにあるのではないでしょうか。

ol 要素が ul 要素や dl 要素と大きく異なる点はリストの順序に意味があると言うことであり、その順序を示すマーカー記号が数字やアルファベット等で描画されるということは、その文字列は文書の一部であり、（CSSではなく） HTML で表現されるのが適当と考えます。

その上で、type 属性を省略したときのデフォルト値は 1、 start 属性のデフォルト値も 1 ですから、マーカー記号が10進数の数字でかつ 1 から始まる場合は両属性を記述する必要はないでしょう。日本語のウェブページにおいて、マーカー記号がアルファベットやローマ数字で表現されることはあまりないですし、開始番号が途中から始まるケースはもっと稀ですから、実際は省略可能なことが大半で、属性を記述しなければならない機会はあまりなさそうです。

あわせて読みたい

§

リストにCSSで list-style-type を設定するとき、 ol / ul 要素と li 要素のどちらに設定した方が良いかという話。（2019年7月22日）

脚注

  • 1.

    例えば RSS/Atom フィードの全文表示なんかはスタイルシートが反映されないケースが多いですよね。 ↩ 戻る