<ol>: The Ordered List element

The HTML <ol> element represents an ordered list of items — typically rendered as a numbered list.

Content categories Flow content, and if the <ol> element's children include at least one <li> element, palpable content.
Permitted content Zero or more <li>, <script> and <template> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role list
Permitted ARIA roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM interface HTMLOListElement

Attributes

This element also accepts the global attributes.

reversed
This Boolean attribute specifies that the list’s items are in reverse order. Items will be numbered from high to low.
start
An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering type is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use start="4".
type
Sets the numbering type:
  • a for lowercase letters
  • A for uppercase letters
  • i for lowercase Roman numerals
  • I for uppercase Roman numerals
  • 1 for numbers (default)

The specified type is used for the entire list unless a different type attribute is used on an enclosed <li> element.

Note: Unless the type of the list number matters (like legal or technical documents where items are referenced by their number/letter), use the CSS list-style-type property instead.

Usage notes

Typically, ordered list items display with a preceding marker, such as a number or letter.

The <ol> and <ul> elements may nest as deeply as desired, alternating between <ol> and <ul> however you like.

The <ol> and <ul> elements both represent a list of items. The difference is with the <ol> element, the order is meaningful. For example:

  • Steps in a recipe
  • Turn-by-turn directions
  • The list of ingredients in decreasing proportion on nutrition information labels

To determine which list to use, try changing the order of the list items; if the meaning changes, use the <ol> element — otherwise you can use <ul>.

Examples

Simple example

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

The above HTML will output:

Using Roman Numeral type

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

The above HTML will output:

Using the start attribute

<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>

The above HTML will output:

Nesting lists

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

The above HTML will output:

Unordered list inside ordered list

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

The above HTML will output:

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<ol>' in that specification.
Living Standard No change since last W3C snapshot, HTML5.
HTML5
The definition of 'HTMLOListElement' in that specification.
Recommendation Added reversed and start attributed; un-deprecated type
HTML 4.01 Specification
The definition of '<ol>' in that specification.
Recommendation Deprecated compact and type.

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
olChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
compact
DeprecatedNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
reversedChrome Full support 18Edge Full support ≤79Firefox Full support 18IE No support NoOpera Full support YesSafari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 18Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
startChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
typeChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support
Full support
No support
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

See also

  • Other list-related HTML Elements: <ul>, <li>, <menu>
  • CSS properties that may be specially useful to style the <ol> element:
    • the list-style property, to choose the way the ordinal displays
    • CSS counters, to handle complex nested lists
    • the line-height property, to simulate the deprecated compact attribute
    • the margin property, to control the list indentation