Definition
The <ol>
tag is used to create an ordered list, which is typically a numbered list.
Example
<ol reversed start="4" >
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
Usage
An opening and closing tag is required.
The
<ol>
element is used with child<li>
elements representing the list items.A
<script>
or<template>
elements are also allowed as child elements.The
<ol>
and<li>
elements may be repeatedly nested within each. For example:<ol> <li>first item <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> </li> <li>second item</li> <li>third item</li> </ol>
You can alternate between
<ol>
and<ul>
elements as required. For instance, you can start with a bullet list and have a nest numbered list.<ol> <li>first item <ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul> </li> <li>second item</li> <li>third item</li> </ol>
Attributes
The <ol>
element supports the Global Attributes, as well as the following:
reversed
The
reversed
attribute is a boolean that specifies that the list items are in reverse order.start
The
start
attribute is a number from which you wish the list to start. This is always an Arabic number (1, 2, 3, 4, 5, 6, etc.), even if a differenttype
attribute is used.type
The
type
attribute sets the type of numbering the list uses.Values can include:
a
for lowercase lettersA
for uppercase lettersi
for lowercase Roman numeralsI
for uppercase Roman numerals1
for numbers (default)
For example, to set Roman numeral numbering:
<ol type="i" > <li>first item</li> <li>second item</li> <li>third item</li> </ol>
Best Practices
- The
<ol>
element represent an ordered list. This means the order matters and is more suitable for a list of steps or directions. If the order does not matter, you should use an unordered list using the<ul>
tag.
Specification
Browser Support
Desktop
Chrome | Edge | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |
Mobile
Android Webview | Chrome Android | Firefox Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |