HTML <ol> Tag
Example
Two different ordered lists (the first list starts at 1, and the second starts at 50):
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
Use the <li> tag to define list items.
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <ol> | Yes | Yes | Yes | Yes | Yes |
Tips and Notes
Tip: Use CSS to style lists. Read more in our CSS tutorial: Styling Lists.
Tip: For unordered list, use the <ul> tag.
Attributes
| Attribute | Value | Description |
|---|---|---|
| reversed | reversed | Specifies that the list order should be descending (9,8,7...) |
| start | number | Specifies the start value of an ordered list |
| type | 1 A a I i |
Specifies the kind of marker to use in the list |
Global Attributes
The <ol> tag also supports the Global Attributes in HTML.
Event Attributes
The <ol> tag also supports the Event Attributes in HTML.
More Examples
Example
Reduce and expand line-height in lists (with CSS):
<ol style="line-height:80%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol
style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
Related Pages
HTML tutorial: HTML Lists
HTML DOM reference: Ol Object
CSS Tutorial: Styling Lists
Default CSS Settings
Most browsers will display the <ol> element with the following default values:
Example
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Try it Yourself »
