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

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

属性

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

compact
この真偽値を持つ属性は、リストをコンパクトなスタイルで描画すべきというヒントを提供します。この属性の解釈はユーザーエージェントに依存するため、すべてのブラウザーで動作するわけではありません。
註: この属性は非推奨のため使用してはいけません。 <ol> 要素は CSS でスタイル付けしてください。compact 属性と似た効果を得るには、CSS プロパティの line-height を使用し、値を 80% にしてください。
reversed HTML5
この真偽値属性は、項目が逆順に並ぶように指定します。
startHTML5
この整数値を持つ属性は、リスト項目の序数の開始値を指定します。序数の形式が XXXI のようなローマ数字や文字であっても、値は常に数値で表現します。 "C" という文字から始めるには、<ol start="3"> を使用します。
メモ: この属性は HTML4 で非推奨になりましたが、 HTML5 で再び導入されました。
type
順番の種類を指示します。
  • 'a' は、英小文字を示します
  • 'A' は、英大文字を示します
  • 'i' は、小文字のローマ数字を示します
  • 'I' は、大文字のローマ数字を示します
  • '1' は、数字を示します(既定値)

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

メモ: この属性は HTML4 で非推奨になりましたが、HTML5 で再び導入されました。(法律文書や技術文書の箇条書きなどのように)リスト番号の値に重要性ががない限り、代わりに CSS の list-style-type プロパティを使用するべきです。

使用上の注意

  • 一般的に、順序付きリストの項目の先頭に、数字、ローマ数字、アルファベットなどの番号が表示されます。この順序付きリストのスタイルは、ページの HTML 記述では定義されていませんが、CSS に関連づけられ、list-style-type プロパティを使用してスタイル付けできます。
  • <ol> 要素と <ul> 要素で定義されたリストの入れ子の階層数や交互に配置することの制限はありません。
  • <ol><ul> は、どちらも項目のリストを表します。両者の違いは、 <ol> 要素では順序に意味があることです。使い分けの目安としては、項目の順序を変更してみてください。意味が変わるようであれば <ol> 要素を使用し、そうでない場合は、<ul> 要素が適しています。

単純な例

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

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

  1. first item
  2. second item
  3. third item

ローマ数字の使用

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

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

i. foo

ii. bar

iii. spam

start 属性の使用

<ol start="7">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

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

  1. first item
  2. second item
  3. third item

入れ子のリスト

<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 は次のように出力されます。

  1. first item
  2. second item
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  3. third item

入れ子の <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 は次のように出力されます。

  1. first item
  2. second item
    • second item first subitem
    • second item second subitem
    • second item third subitem
  3. third item

仕様書

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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり1 あり あり あり
compact あり あり1 あり あり あり
reversed18 ?18 なし あり6
start あり あり1 あり あり あり
type あり あり1 あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
compact あり あり あり4 あり あり あり
reversed あり あり ?18 あり あり あり
start あり あり あり4 あり あり あり
type あり あり あり4 あり あり あり

関連情報

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

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, ethertank, Marsf
最終更新者: mfuji09,