The HTML <ol>
element represents an ordered list of items, typically rendered as a numbered list.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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: the
<ol>
element should be styled using CSS. To give an effect similar to thecompact
attribute, the CSS propertyline-height
can be used with a value of80%
. reversed
HTML5- This Boolean attribute specifies that the items of the list are specified in reversed order.
start
HTML5- This integer attribute specifies the start value for numbering the individual list items. Although the ordering type of list elements might be Roman numerals, such as XXXI, or letters, the value of start is always represented as a number. To start numbering elements from the letter "C", use
<ol start="3">
.Note: This attribute was deprecated in HTML4, but reintroduced in HTML5.
type
- Indicates the numbering type:
'a'
indicates lowercase letters,'A'
indicates uppercase letters,'i'
indicates lowercase Roman numerals,'I'
indicates uppercase Roman numerals,- and
'1'
indicates numbers (default).
The type set 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 numbering, which can be of any form, like numerals, letters or Romans numerals or even simple bullets. This numbered style is not defined in the HTML description of the page, but in its associated CSS, using the
list-style-type
property. - There is no limitation to the depth and alternation of nested lists defined with the
<ol>
and<ul>
elements. - The
<ol>
and<ul>
both represent a list of items. They differ in the way 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, else the<ul>
is adequate.
Examples
Simple example
<ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol>
Above HTML will output:
- first item
- second item
- third item
Using Roman Numeral type
<ol type="i"> <li>foo</li> <li>bar</li> <li>spam</li> </ol>
Above HTML will output
i. foo
ii. bar
iii. spam
Using the start
attribute
<ol start="7"> <li>first item</li> <li>second item</li> <li>third item</li> </ol>
Above HTML will output:
- first item
- second item
- third item
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>
Above HTML will output:
- first item
- second item
- second item first subitem
- second item second subitem
- second item third subitem
- third item
Nested <ol> and <ul>
<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>
Above HTML will output:
- first item
- second item
- second item first subitem
- second item second subitem
- second item third subitem
- third item
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
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support Yes | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
compact | Chrome Full support Yes | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
reversed | Chrome Full support 18 | Edge ? | Firefox Full support 18 | IE No support No | Opera Full support Yes | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile ? | Firefox Android Full support 18 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
start | Chrome Full support Yes | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
type | Chrome Full support Yes | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung 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 deprecatedcompact
attribute, - the
margin
property, useful to control the indent of the list.
- the