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

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

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

属性

この要素にはグローバル属性があります。

compact
この真偽値を持つ属性は、リストをコンパクトなスタイルで描画すべきというヒントを提供します。この属性の解釈はユーザーエージェントに依存するため、すべてのブラウザーで動作するわけではありません。

警告: この属性は非推奨のため使用してはいけません。代わりに CSS を使用してください。 compact 属性と似た効果を得るには、 CSS プロパティの line-height を使用し、値を 80% にしてください。

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

メモ: この属性は HTML4 で非推奨になりましたが、 HTML5 で再び導入されました。

type
この属性は、番号付けの種類を設定します。
  • 'a' は、英小文字を示します
  • 'A' は、英大文字を示します
  • 'i' は、小文字のローマ数字を示します
  • 'I' は、大文字のローマ数字を示します
  • '1' は、数字を示します (既定値)

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

メモ: この属性は HTML4 で非推奨になりましたが、HTML5 で再び導入されました。

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

使用上の注意

  • ふつう、順序付きリストの項目は、先頭に数字、文字、点などのマーカーが表示されます。マーカーの種類は CSS の list-style-type プロパティを使用して指定することができます。
  • <ol> 要素と <ul> 要素は、必要なだけ深く入れ子にすることができます。さらに言えば、入れ子になったリストが <ol><ul> の間で変化することにで制限はありません。
  • <ol><ul> は、どちらも項目のリストを表します。両者の違いは、 <ol> 要素では順序に意味があることです。使い分けの目安としては、項目の順序を変更してみてください。意味が変わるようであれば <ol> 要素を使用し、そうでない場合は、 <ul> 要素を使用することができます。

単純な例

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

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

ローマ数字の使用

<ol type="i">
  <li>foo</li>
  <li>bar</li>
  <li>spam</li>
</ol> 

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

start 属性の使用

<ol start="7">
  <li>first item</li>
  <li>second item</li>
  <li>third item</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> 要素と <ul> 要素

<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 を非推奨に指定

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
olChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
compact
非推奨非標準
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
reversedChrome 完全対応 18Edge ? Firefox 完全対応 18IE 未対応 なしOpera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 18Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
startChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
typeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。

関連情報

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