List Types
🔢 Ordered Lists — Number Wali List
<ol><li>First item</li><li>Second item</li></ol>
Ordered list jaise TSRTC bus route number — 5K, 5M, 47A — har stop ka specific order hai. Stop 1 se 5 pe nahi ja sakte 2, 3, 4 ke bina. Sequence matter karta hai.
<ol> tag numbered list banata hai. Har item <li> mein wrap hota hai. Browser automatically numbers add karta hai. Number type change kar sakte ho (1, a, A, i, I), kisi bhi number se start kar sakte ho, aur order reverse bhi kar sakte ho.
TSRTC Analogy: Bus route 5K ke stops order mein hain — Jubilee Bus Station → Lakdi-ka-pool → Hitech City. Stop 3 pe stop 2 ke bina nahi pahuncho. Yeh ordered list hai — sequence fixed hai.
Code Example
HTML — Ordered Lists — Number Wali List
<!-- Basic ordered list -->
<ol>
<li>Subah 6 baje utho</li>
<li>Nimrah Cafe mein Irani chai piyo</li>
<li>Hitech City ke liye bus lo</li>
<li>9 baje office pahuncho</li>
</ol>
<!-- Different number types -->
<ol type="A">
<li>Paradise Biryani</li>
<li>Bawarchi Biryani</li>
<li>Shadab Biryani</li>
</ol>
<!-- Specific number se start -->
<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
</ol>
<!-- Roman numerals -->
<ol type="I">
<li>Stage 1 — Basics</li>
<li>Stage 2 — Intermediate</li>
<li>Stage 3 — Advanced</li>
</ol>
<!-- Reverse order -->
<ol reversed>
<li>Last step</li>
<li>Middle step</li>
<li>First step</li>
</ol><ol>Ordered list — automatically number karta hai<li>List item — list ka har pointtype="A"Uppercase letters: A, B, C...type="a"Lowercase letters: a, b, c...type="I"Uppercase Roman: I, II, III...type="i"Lowercase Roman: i, ii, iii...type="1"Numbers (default): 1, 2, 3...start="5"5 se numbering start karoreversedUpar se neeche nahi, neeche se upar count✅ When to Use
- Step-by-step instructions (recipes, tutorials)
- Rankings — "Hyderabad ke Top 5 biryani places"
- Sequences jo order mein follow hone chahiye
- Numbered chapters wali table of contents
- Koi bhi process jahan order matter kare
❌ When NOT to Use
- Jab order matter na kare (unordered list use karo)
- Navigation menus ke liye (styled unordered list use karo)
- Jab numbers ke beyond custom styling chahiye (CSS use karo)
`type` attribute HTML5 mein deprecated hai. CSS `list-style-type` use karo: `ol { list-style-type: upper-alpha; }`. Par quick prototyping ke liye type attribute abhi bhi sab browsers mein kaam karta hai.