<ol>: 順序付きリスト要素

HTML の <ol> 要素は、項目の順序付きリストを表します。ふつうは番号付きのリストとして表示されます。

コンテンツカテゴリ フローコンテンツ。また、<ol> 要素の子に少なくとも 1 個の <li> 要素を包含する場合は、知覚可能コンテンツ
許可されている内容 0個以上の <li>, <script>, <template> の各要素。
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素
Implicit ARIA role list
許可されている ARIA ロール directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM インターフェイス HTMLOListElement

属性

この要素はグローバル属性も受け付けます。

reversed HTML5
論理属性で、リストの項目が逆順で指定されていることを指定します。項目は大きい方から小さい方へ番号付けされます。
start HTML5
整数値を持つ属性で、リスト項目の序数の開始値を指定します。この値は、番号付けの種類が文字やローマ数字であっても、常にアラビア数字 (1, 2, 3, など) で指定します。例えば、 "d" の文字や "iv" のローマ数字から始める場合は、 start="4" を使用してください。
type
この属性は、番号付けの種類を設定します。
  • a は、英小文字を示します
  • A は、英大文字を示します
  • i は、小文字のローマ数字を示します
  • I は、大文字のローマ数字を示します
  • 1 は、数字を示します (既定値)

指定された種類は、内部の <li> 要素で異なる type 属性が使用されない限り、リスト全体に使用されます。

注: (法律文書や技術文書の箇条書きなどのように) リスト番号の種類に重要性がない限り、代わりに CSS の list-style-type プロパティを使用してください。

使用上の注意

ふつう、順序付きリストの項目は、先頭に数字や文字などのマーカーが表示されます。

<ol> 要素と <ul> 要素は、必要なだけ深く入れ子にすることができ、 <ol><ul> を好きなだけ変更することもできます。

<ol><ul> は、どちらも項目のリストを表します。両者の違いは、 <ol> 要素では順序に意味があることです。例えば次のようなものです。

  • レシピの手順
  • 道順
  • 栄養成分表示ラベルにおける成分の降順の一覧

どちらのリストを使用するか判断するには、リスト項目の順序を変更してみてください。意味が変わるようであれば <ol> 要素を使用し、そうでない場合は、 <ul> 要素を使用することができます。

単純な例

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

上記の HTML は次のように出力されます。

ローマ数字の使用

<ol type="i">
  <li>Introduction</li>
  <li>List of Greivances</li>
  <li>Conclusion</li>
</ol> 

上記の HTML は次のように出力されます。

start 属性の使用

<p>Finishing places of contestants not in the winners’ circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin’ Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

上記の HTML は次のように出力されます。

入れ子のリスト

<ol>
  <li>first item</li>
  <li>second item  <!-- ここに終了タグ </li> はありません! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- 終了タグ </li> はここです -->
  <li>third item</li>
</ol>

上記の HTML は次のように出力されます。

順序付きリストの中の順序なしリスト

<ol>
  <li>first item</li>
  <li>second item  <!-- ここに終了タグ </li> はありません! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>            <!-- 終了タグ </li> はここです -->
  <li>third item</li>
</ol>

上記の HTML は次のように出力されます。

仕様書

仕様書 状態 備考
HTML Living Standard
<ol> の定義
現行の標準 最新の W3C スナップショットである HTML5 から変更なし
HTML5
HTMLOListElement の定義
勧告 reversed および start 属性を追加、type の非推奨を解除
HTML 4.01 Specification
<ol> の定義
勧告 compact および type を非推奨に指定

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • 他のリスト関連の HTML 要素: <ul><li><menu> および廃止された <dir>
  • <ol> 要素のスタイル付けに役立つ CSS プロパティ:
    • list-style プロパティは、序数の表示方法を選ぶのに便利です。
    • CSS カウンターは、複雑な入れ子のリストを扱うのに便利です。
    • line-height プロパティは、非推奨の compact 属性をシミュレートするのに役立ちます。
    • margin プロパティは、リストの字下げを制御するのに役立ちます。