The <ol>
tag creates an ordered list of items.
In an ordered list the items are sequentially numbered.
The numbers are either numeric, alphabetic, or roman numerals.
An <ol>
element with cities listed in numeric order.
<ol>
<li>Amsterdam</li>
<li>London</li>
<li>Berlin</li>
<li>Paris</li>
</ol>
ol
= ordered listli
= list item
The <ol>
tag creates an ordered list of items.
List items are added with <li> tags placed inside the <ol>
element.
To specify the numbering use the type, start, and reversed attributes.
Several <ol>
elements, each with their own numbering:
<ol type="a">
<li>Amsterdam</li>
<li>London</li>
<li>Berlin</li>
<li>Paris</li>
</ol>
<ol start="50">
<li>Amsterdam</li>
<li>London</li>
<li>Berlin</li>
<li>Paris</li>
</ol>
<ol type="I" reversed>
<li>Amsterdam</li>
<li>London</li>
<li>Berlin</li>
<li>Paris</li>
</ol>
Tip: The start attribute sets the starting value for the list. And reversed reverses the numbering.
This table lists the <ol>
tag attributes.
Attribute | Value | Description |
---|---|---|
type | 1, A, a, I, i | List marker type. Default is 1. |
start | number | Ordered list start value |
id | identifier | Defines a unique identifier for the ol. |
class | classnames | Sets one or more CSS classes to be applied to the ol element. |
style | CSS-styles | Sets the style for the ol element. |
data-* | value | Defines additional data that can be used by JavaScript. |
hidden | hidden | Specifies whether the ol element is hidden. |
reversed | reversed | List order (descending or ascending) |
For additional global attributes see our global attributes list.
By default, list items increment consecutively by number or alphabetically.
The item numbers can be changed with the value attribute on the <li> tags.
An <ol>
element with custom values.
<ol>
<li>Paris</li>
<li value="10">Amsterdam</li>
<li value="20">London</li>
<li value="57">Berlin</li>
</ol>
The <ol>
tag is part of a group of tags
that are used to create lists (i.e. lists of items) on web pages.
This group is referred to as the List tag group.
Together, they allow you to create comprehensive HTML lists.
Below are the list tags.
Element | Description |
---|---|
<ul> | Creates an unordered, bulleted list |
<ol> | Creates a numerically or alphabetically ordered list |
<li> | Defines a list item. Used in <ol> and <ul> elements |
<dl> | Defines a description list |
<dt> | Adds a term or name to a <dl> element |
<dd> | Adds a description of a term or name to a <dl> element |
Here is when <ol>
support started for each browser:
Chrome
|
1.0 | Sep 2008 |
Firefox
|
1.0 | Sep 2002 |
IE/Edge
|
1.0 | Aug 1995 |
Opera
|
1.0 | Jan 2006 |
Safari
|
1.0 | Jan 2003 |