目次に戻る

ol要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性
  • reversed→ブーリアン属性。降順リストである場合に指定する。
  • start→最初のリスト項目の順序番号を示す整数。デフォルトは、reversed属性がある場合は子要素たるli要素の個数、そうでない場合は1
  • type→1、a、A、i、I。リストマーカーの種類を指定する。デフォルトは1
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、list。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、group、listbox、menu、menubar、radiogroup、tablist、toolbar、tree、presentation、noneを指定可。
視覚系ブラウザのデフォルトとして期待されるCSS

  ol {
    display: block;
    unicode-bidi: isolate;
    margin-block: 1em;
    padding-inline-start: 40px;
    list-style-type: decimal;
    counter-reset: list-item;
  }

  :is( dl,menu,ol,ul) ol {
    margin-block: 0;
  }

  ol[type=1 s] {list-style-type: decimal;}
  ol[type=a s] {list-style-type: lower-alpha;}
  ol[type=A s] {list-style-type: upper-alpha;}
  ol[type=i s] {list-style-type: lower-roman;}
  ol[type=I s] {list-style-type: upper-roman;}
視覚系ブラウザにおいて期待されるレンダリング
  • start属性値及びreversed属性をレンダリングのヒントとして用いる。
ユーザーエージェントに対する特記事項
  • （reversed属性及びstart属性の指定によって）順序数が0以下になるリスト項目が出てきた場合は、当該リスト項目のリストマーカーは、type属性による指定にかかわらず、10進数方式とすべきである。
意味・用法

順序が変わったら意味合いが変わってしまうような、意図的に順序付けられたリストを表す。

私見・補足

順序はどうでもよい場合は、ul要素を用いる。

リストに見出しなどをつける方法は、ul要素と同様なので、そちらを参照。

表示確認

ソース

  成績順位最下位（100位）から5人の名前
  <ol reversed="reversed" start="100">
      <li>百番太郎</li>
      <li>九九次郎</li>
      <li>九八花子</li>
      <li>九七丸男</li>
      <li>九六裕子</li>
  </ol>
表示結果
成績順位最下位（100位）から5人の名前
  1. 百番太郎
  2. 九九次郎
  3. 九八花子
  4. 九七丸男
  5. 九六裕子