<ol>: The Ordered List element
The <ol>
HTML element represents an ordered list of items — typically rendered as a numbered list.
Try it
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," usestart="4"
. type
-
Sets the numbering type:
a
for lowercase lettersA
for uppercase lettersi
for lowercase Roman numeralsI
for uppercase Roman numerals1
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
html
<ol>
<li>Fee</li>
<li>Fi</li>
<li>Fo</li>
<li>Fum</li>
</ol>
Result
Using Roman Numeral type
html
<ol type="i">
<li>Introduction</li>
<li>List of Grievances</li>
<li>Conclusion</li>
</ol>
Result
Using the start attribute
html
<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>
Result
Nesting lists
html
<ol>
<li>first item</li>
<li>
second item
<!-- closing </li> tag is 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>
Result
Unordered list inside ordered list
html
<ol>
<li>first item</li>
<li>
second item
<!-- closing </li> tag is 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>
Result
Technical summary
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 |
Specifications
Specification |
---|
HTML Standard # the-ol-element |
Browser compatibility
BCD tables only load in the browser
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 deprecatedcompact
attribute - the
margin
property, to control the list indentation
- the