HTML <ol>

順序リスト(Ordered List)を作成します。順序リストとは、リスト項目の先頭に数字またはアルファベットが付くリストである。リスト項目は<LI>タグで追加します。

リストは字下げ（インデント）して表示されるが、字下げ幅はブラウザによって異なる。どのブラウザを使うかに関わらず同じように表示するようスタイルシートで指定することもできるが、その方法はブラウザによって異なる。例えば、Internet Explorer 6.0はマージンの指定によって字下げを行っているので、スタイルシートmargin-leftで指定する。Firefox 2.0はパディングの指定によって字下げを行っているので、スタイルシートpadding-leftで指定する。つまり、Internet Explorer 6.0とFirefox 2.0で同じように表示させるためには、スタイルシートmargin-leftとpadding-leftの両方に同じ値を指定する必要がある。実際の例を次に示す。

<ol style="margin-left: 5px; padding-left: 5px">

書式

<ol>
  <!-- zero or more li, script, and template elements -->
</ol>

開始タグと終了タグは省略できません。 開始タグと終了タグの間にはLI要素タイプが1回以上出現します。

カテゴリ

フローコンテンツ

コンテンツモデル

ol 要素の開始タグと終了タグの間には、以下に示す要素を含めることができる。

タグの省略

ol 要素の開始タグと終了タグは省略できない。

属性

属性は全て省略可能です。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定することもできる。
id
HTML文書内で一意な識別子を指定する。
lang
リストの言語を指定する。 
<ol lang="en">
  <li>A robot must not injure a human being, or allow a human being to come to harm.</li>
  <li>A robot must obey the orders given by human beings unless they conflict with the First Law.</li>
  <li>A robot must protect itself as long as such protection does not conflict with the First or Second Laws.</li>
</ol>
  1. A robot must not injure a human being, or allow a human being to come to harm.
  2. A robot must obey the orders given by human beings unless they conflict with the First Law.
  3. A robot must protect itself as long as such protection does not conflict with the First or Second Laws.
reversed
リストの番号を逆順にする。 
<ol reversed>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>
  1. first
  2. second
  3. third
start
リストの開始値を指定する。 
<ol start="10">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>
  1. first
  2. second
  3. third
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定することもできる。
type
リスト項目の先頭に付ける数字の形式を指定します。スタイルシート属性 list-style や list-style-typeでも指定することができます。
type
値意味
1アラビア数字
a英小文字
A英大文字
iローマ数字（小文字）
Iローマ数字（大文字）
 
<ol type="a">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>
  1. first
  2. second
  3. third
<ol type="A">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>
  1. first
  2. second
  3. third
<ol type="i">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>
  1. first
  2. second
  3. third
<ol type="I">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>
  1. first
  2. second
  3. third

関連記事

参考文献

Web Hypertext Application Technology Working Group 2023. Grouping content HTML Living Standard