Definition and Usage
The <ol> tag represents a list of items where the order is specified.
The term 'ol' is an abbreviation for Ordered List, meaning that changing the order of the items materially affects their meaning.
- The
<ol>tag is used to list items where the order of importance is specified. - The child items of this element are defined using the
<li>tag. - A numbered marker (for example, "1, 2, 3, ...") is automatically generated and displayed in sequence before each item.
If you need to create a list of items where the order is not specified, use the <ul> tag.
Basic Example
The following is a simple example using the <ol> tag.
<p>Our local diner has many delicious menu items.</p>
<ol>
<li>Burger</li>
<li>Fries</li>
<li>Grilled cheese</li>
<li>Fried chicken</li>
</ol>
Our local diner has many delicious menu items.
- Burger
- Fries
- Grilled cheese
- Fried chicken
Permitted Content and Important Notes
The content that can be used as child elements of the <ol> tag is limited
<li><script>-
<template>
Except for zero or more of these elements, other elements or the insertion of text (that is, a text node) are not allowed.
The following examples show incorrect cases that use content not permitted within the <ol> tag, as well as correct cases.
Incorrect and Correct Examples
<p> tag is used as a child of the <ol> tag, which is not permitted.
<ol>
<p>Our local diner has many delicious menu items.</p>
<li>Burger</li>
<li>Fries</li>
<li>Grilled cheese</li>
<li>Fried chicken</li>
</ol>
<ol> tag.
<ol>
Our local diner has many delicious menu items.
<li>Burger</li>
<li>Fries</li>
<li>Grilled cheese</li>
<li>Fried chicken</li>
</ol>
<p>Our local diner has many delicious menu items.</p>
<ol>
<li>Burger</li>
<li>Fries</li>
<li>Grilled cheese</li>
<li>Fried chicken</li>
</ol>
<a> tag is used as a direct child of the <ol> tag.
<h3>Real-time Search Rankings</h3>
<ol>
<a href=""><li>How to learn HTML</li></a>
<a href=""><li>How to learn CSS</li></a>
<a href=""><li>How to learn JavaScript</li></a>
<a href=""><li>How to learn PHP</li></a>
</ol>
<h3>Real-time Search Rankings</h3>
<ol>
<li><a href="">How to learn HTML</a></li>
<li><a href="">How to learn CSS</a></li>
<li><a href="">How to learn JavaScript</a></li>
<li><a href="">How to learn PHP</a></li>
</ol>
<ol> tag to have no content, it is not recommended since it does not represent a meaningful list.
<ol>
<!-- No content -->
</ol>
Useful Attributes
The <ol> tag provides two particularly useful attributes: reversed and start.
reversed Attribute
The reversed attribute reverses the order of the list items. It is a boolean attribute, meaning you only need to include the attribute name without specifying a value.
<p>Our local diner has many delicious menu items.</p>
<ol reversed>
<li>Burger</li>
<li>Fries</li>
<li>Grilled cheese</li>
<li>Fried chicken</li>
</ol>
Our local diner has many delicious menu items.
- Burger
- Fries
- Grilled cheese
- Fried chicken
start Attribute
The start attribute specifies the starting value for the first item in an <ol>. It accepts integer values, including negative integers, 0, and positive integers.
<p>Our local diner has many delicious menu items.</p>
<ol>
<li>Burger</li>
<li>Fries</li>
<li>Grilled cheese</li>
<li>Fried chicken</li>
</ol>
<p>The following items are also highly recommended:</p>
<ol start="5">
<li>Mozzarella Sticks</li>
<li>Onion Rings</li>
<li>Chocolate Milkshake</li>
</ol>
Our local diner has many delicious menu items.
- Burger
- Fries
- Grilled cheese
- Fried chicken
The following items are also highly recommended:
- Mozzarella Sticks
- Onion Rings
- Chocolate Milkshake
Using Nested Lists
The <ol> and <ul> tags can be nested within an <li> tag as needed. These tags can also be mixed and used interchangeably to create complex list structures.
<ul> Tag Inside the <li> Tag
<p>Our local diner has many delicious menu items.</p>
<ol>
<li>
Noodles
<ul>
<li>Ramen</li>
<li>Udon</li>
<li>Spaghetti</li>
</ul>
</li>
<li>
Wraps
<ul>
<li>Tuna wrap</li>
<li>Veggie wrap</li>
<li>Fish roe wrap</li>
</ul>
</li>
<li>
Cutlets
<ul>
<li>Pork cutlet</li>
<li>Cutlet combo</li>
</ul>
</li>
</ol>
Our local diner has many delicious menu items.
-
Noodles
- Ramen
- Udon
- Spaghetti
-
Wraps
- Tuna wrap
- Veggie wrap
- Fish roe wrap
-
Cutlets
- Pork cutlet
- Cutlet combo
<ol> Tag Inside the <li> Tag
<p>Our local diner has many delicious menu items.</p>
<ol>
<li>
Noodles
<ol>
<li>Ramen</li>
<li>Udon</li>
<li>Spaghetti</li>
</ol>
</li>
<li>
Wraps
<ol>
<li>Tuna wrap</li>
<li>Veggie wrap</li>
<li>Fish roe wrap</li>
</ol>
</li>
<li>
Cutlets
<ol>
<li>Pork cutlet</li>
<li>Cutlet combo</li>
</ol>
</li>
</ol>
Our local diner has many delicious menu items.
-
Noodles
- Ramen
- Udon
- Spaghetti
-
Wraps
- Tuna wrap
- Veggie wrap
- Fish roe wrap
-
Cutlets
- Pork cutlet
- Cutlet combo
Introduction to CSS Styling Tips
The following article introduced various methods for styling list markers using CSS.
Browser Compatibility
| Tag and Attribute |
Desktop Chrome
|
Desktop Edge
|
Desktop Firefox
|
Safari
|
|---|---|---|---|---|
<ol>
|
1 | 12 | 1 | 4 |
start
|
1 | 12 | 1 | 4 |
reversed
|
18 | 79 | 18 | 4 |
Specifications
| Specification | |
|---|---|
<ol>
|
HTML Standard #the-ol-element |