The HTML
<ol> element represents an ordered list of items — typically rendered as a numbered list.HTML Demo: <ol>
Output
- Mix flour, baking powder, sugar, and salt.
- In another bowl, mix eggs, milk, and oil.
- Stir both mixtures together.
- Fill muffin tray 3/4 full.
- Bake for 20 minutes.
| 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. |
| Permitted ARIA roles | directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation |
| 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
typeis letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," usestart="4". type- Sets the numbering type:
afor lowercase lettersAfor uppercase lettersifor lowercase Roman numeralsIfor uppercase Roman numerals1for numbers (default)
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:
- Fee
- Fi
- Fo
- Fum
Using Roman Numeral type
<ol type="i">
<li>Introduction</li>
<li>List of Greivances</li>
<li>Conclusion</li>
</ol> The above HTML will output:
- Introduction
- List of Greivances
- Conclusion
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:
Finishing places of contestants not in the winners’ circle:
- Speedwalk Stu
- Saunterin’ Sam
- Slowpoke Rodriguez
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:
- first item
- second item
- second item first subitem
- second item second subitem
- second item third subitem
- third item
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:
- 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. |
LSLiving Standard | No change since last W3C snapshot, HTML5. |
| HTML5 The definition of 'HTMLOListElement' in that specification. |
RECRecommendation | Added reversed and start attributed; un-deprecated type |
| HTML 4.01 Specification The definition of '<ol>' in that specification. |
RECRecommendation | Deprecated compact and type. |
Browser compatibility
Update compatibility data on GitHub
| Yes | 12 | 1 | Yes | Yes | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
| Yes | 12 | 1 | Yes | Yes | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
| 18 | ? | 18 | No | Yes | 6 | Yes | Yes | 18 | Yes | Yes | Yes |
| Yes | 12 | 1 | Yes | Yes | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
| Yes | 12 | 1 | Yes | Yes | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
Legend
- Full support
- No support
- Compatibility unknown
- Non-standard. Expect poor cross-browser support.
- 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-styleproperty, to choose the way the ordinal displays - CSS counters, to handle complex nested lists
- the
line-heightproperty, to simulate the deprecatedcompactattribute - the
marginproperty, to control the list indentation
- the