The <ol> tag in HTML is used to define ordered (numbered) lists. It automatically numbers each list item, making it perfect for step-by-step instructions, rankings, recipes, task lists, or any content where the order matters.
📌 What Is the <ol> Tag?
The <ol> tag stands for “ordered list”, and it’s paired with <li> (list item) elements to define each point in the list.
Basic Syntax:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
🟢 This will produce:
- First item
- Second item
- Third item
🧩 Structure Diagram
<ol>
├─ <li> Item 1 </li>
├─ <li> Item 2 </li>
└─ <li> Item 3 </li>
</ol>
✅ Use Cases for <ol>
| Use Case | Example |
|---|---|
| Step-by-step instructions | Recipe, tutorial |
| Ordered task list | To-do app |
| Ranking or top 10 list | “Top 5 Movies of 2025” |
| Chronological event listing | Timeline or historical milestones |
🔧 Attributes of <ol>
| Attribute | Description |
|---|---|
type | Specifies the type of numbering (1, A, a, I, i) |
start | Sets the starting number |
reversed | Displays list in descending order |
🧪 Example 1: Change List Type
<ol type="A">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ol>
🔠 Output:
A. Apple
B. Banana
C. Cherry
🧪 Example 2: Start at Custom Number
<ol start="5">
<li>Step Five</li>
<li>Step Six</li>
</ol>
Output:
5. Step Five
6. Step Six
🧪 Example 3: Reversed List
<ol reversed>
<li>Gold</li>
<li>Silver</li>
<li>Bronze</li>
</ol>
Output:
3. Gold
2. Silver
- Bronze
🎨 Styling <ol> with CSS
You can change the style of an ordered list using CSS:
<ol class="roman-list">
<li>Intro</li>
<li>Development</li>
<li>Conclusion</li>
</ol>
<style>
.roman-list {
list-style-type: upper-roman;
}
</style>
Output:
I. Intro
II. Development
III. Conclusion
📜 <ol> vs <ul>
| Feature | <ol> | <ul> |
|---|---|---|
| Ordered items | ✅ Yes | ❌ No (unordered bullets) |
| Use case | Steps, ranks, instructions | Lists with no sequence |
| Styling options | Numbers, letters, Roman numerals | Bullets, custom markers |
📶 Accessibility & SEO Tips
- ✅ Use
<ol>when order matters — screen readers announce the number - ✅ Helps users track steps in guides or forms
- ✅ Adds semantic meaning to lists, boosting SEO
🧠 Bonus Tip: Use
<li>content clearly and concisely for better readability and accessibility.
🏁 Conclusion
The <ol> tag is a simple yet powerful HTML tool for presenting sequential content in a structured, accessible, and readable way. From tutorials to rankings, it ensures your content is both visually clear and semantically meaningful.
⚡ Use
<ol>whenever the order of items matters — your users and search engines will thank you.