HTML <ol> Tag – Ordered List
📌 Introduction
The <ol> tag is used to create an ordered list in HTML.
An ordered list displays items in a specific sequence, usually using numbers.
It is commonly used for:
- Steps in a tutorial
- Instructions
- Rankings
- Processes
🧱 Syntax
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>OL Example</title>
</head>
<body>
<h2>How to Make Tea</h2>
<ol>
<li>Boil water</li>
<li>Add tea leaves</li>
<li>Pour into cup</li>
<li>Serve</li>
</ol>
</body>
</html>
🖥️ Output Explanation
- Items are automatically numbered (1, 2, 3...)
- Order is important
- Each
<li>represents a step
🎯 Important Rule
👉 <ol> always uses <li> elements
✔ Correct:
<ol>
<li>Step 1</li>
</ol>
❌ Wrong:
<ol>
Step 1
</ol>
🎯 When to Use <ol>
Use it for:
- Step-by-step instructions
- Recipes
- Tutorials
- Rankings or ordered data
Example:
<ol>
<li>Open editor</li>
<li>Write code</li>
<li>Run program</li>
</ol>
⚙️ Useful Attributes
1. start
<ol start="5">
<li>Item</li>
</ol>
✔ Starts numbering from 5
2. type
<ol type="A">
<li>Item</li>
</ol>
✔ Types:
1→ numbersA→ uppercase lettersa→ lowercase lettersI→ Roman numerals
⚖️ <ol> vs <ul>
| Tag | Type | Use |
|---|---|---|
<ol> |
Ordered list | Steps / sequence |
<ul> |
Unordered list | Bullet points |
🎨 Styling Example
<ol style="color:blue;">
<li>First step</li>
<li>Second step</li>
</ol>
🚫 Common Mistakes
- Using
<ol>when order doesn’t matter ❌ - Forgetting
<li>items ❌ - Using it for layout ❌
🧪 Mini Exercise
Create a page with:
- A tutorial (example: how to install software)
- Use
<ol>for steps - Change numbering style using
type="A"