HTML Tags
HTML <ol> Tag
The
<ol>tag in HTML defines an ordered (numbered) list, and the<li>tag defines individual list items within that list.
Ordered lists are used when the sequence of items is important, such as steps in a process, rankings, or instructions.
Syntax
html
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>Attributes
| Tag | Attribute | Description |
|---|---|---|
<ol> | type | Specifies the numbering type. Values: 1 (default), A, a, I, i. |
<ol> | start | Defines the starting number for the list. |
<ol> | reversed | Displays the list in descending order. (Boolean attribute) |
<li> | value | Specifies a custom number or letter for the list item. |
<li> | type | Overrides the numbering type for that specific item. (Deprecated) |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List Example</title>
<style>
ol {
background-color: #f9f9f9;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
width: 250px;
}
li {
margin: 5px 0;
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Steps to Make Tea</h2>
<ol type="1" start="1" reversed>
<li>Boil water</li>
<li>Add tea leaves</li>
<li>Pour into cup</li>
<li>Add sugar and milk</li>
</ol>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
The <ol> and <li> tags have full browser support across all modern browsers.
Use our Try It Editor to see how list numbering, types, and reversal behave in different browsers.
Notes
- The
<ol>tag is used for ordered lists, and<li>defines the items within it. - You can start numbering from any point using the
startattribute. - The
reversedattribute displays lists in reverse order. - The numbering style can be customized using CSS:
css
ol { list-style-type: upper-roman; }- Nested ordered lists create hierarchical numbering.
Conclusion
The <ol> and <li> tags are perfect for creating structured, ordered lists where sequence matters.
They make step-by-step guides, rankings, and ordered data clear and easy to follow.
Use attributes like type, start, and reversed to fully control the numbering behavior.