Avustajamme eivät ole vielä kääntäneet tätä artikkelia kielelle suomi. Liity yhteisöömme ja hoida homma kuntoon!
Voit myös lukea tämän artikkelin kielellä English (US).

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> elements, which in turn often contain nested <ol> or <ul> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Permitted ARIA roles directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation
DOM interface HTMLOListElement

Attributes

This element includes the global attributes.

compact
This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent, and it doesn't work in all browsers.

Warning: Do not use this attribute, as it has been deprecated: use CSS instead. To give an effect similar to the compact attribute, the CSS property line-height can be used with a value of 80%.

reversed HTML5
This Boolean attribute specifies that the items of the list are specified in reverse order. Items will be numbered from high to low.
start HTML5
This integer attribute specifies the start value for numbering the individual list items. This value is always represented as 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".

Note: This attribute was deprecated in HTML4, but reintroduced in HTML5.

type
This attribute sets the numbering type:
  • 'a' indicates lowercase letters
  • 'A' indicates uppercase letters
  • 'i' indicates lowercase Roman numerals
  • 'I' indicates uppercase Roman numerals
  • '1' indicates numbers (default)

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

Note: This attribute was deprecated in HTML4, but reintroduced in HTML5.

Unless the value of the list number matters (e.g., in legal or technical documents where items are to be referenced by their number/letter), the CSS list-style-type property should be used instead.

Usage notes

  • Typically, ordered-list items are displayed with a preceding marker, such as a number, letter, or bullet. The type of marker can be specified using the CSS list-style-type property.
  • The <ol> and <ul> elements may be nested as deeply as desired. Moreover, the nested lists may alternate between <ol> and <ul> without restriction.
  • The <ol> and <ul> elements both represent a list of items. They differ in that, with the <ol> element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the <ol> element should be used , otherwise you can use <ul>.

Examples

Simple example

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

The above HTML will output:

Using Roman Numeral type

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

The above HTML will output:

Using the start attribute

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
olChrome Full support YesEdge Full support YesFirefox 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 YesFirefox 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 ? Firefox 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 YesFirefox 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
type
DeprecatedNon-standard
Chrome Full support YesEdge Full support YesFirefox 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
Compatibility unknown  
Compatibility unknown
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> and the obsolete <dir>;
  • CSS properties that may be specially useful to style the <ol> element:
    • the list-style property, useful to choose the way the ordinal is displayed,
    • CSS counters, useful to handle complex nested lists,
    • the line-height property, useful to simulate the deprecated compact attribute,
    • the margin property, useful to control the indent of the list.