HTML Ordered Lists

HTML Ordered List का उपयोग items को एक निश्चित क्रम (order) में दिखाने के लिए किया जाता है।
इसमें list items के आगे numbers, letters या roman numerals दिखाई देते हैं।

Ordered lists steps, instructions, rankings और sequences दिखाने के लिए सबसे ज्यादा उपयोग होती हैं।

Ordered List के लिए कौन-से Tags होते हैं

HTML Ordered List में ये tags use होते हैं:

<ol> – Ordered List container
<li> – List item

Basic Ordered List Syntax

<ol>
  <li>Open Website</li>
  <li>Login</li>
  <li>Dashboard Access</li>
</ol>

Browser default रूप से numbering 1, 2, 3 दिखाता है।

Simple Ordered List Example

<ol>
  <li>Boil Water</li>
  <li>Add Tea Leaves</li>
  <li>Serve Hot</li>
</ol>

यह daily routine जैसे cooking steps या process explain करने के लिए perfect है।

Ordered List Types

Ordered list में numbering का type (style) बदला जा सकता है।

<ol type="A">
  <li>Option One</li>
  <li>Option Two</li>
</ol>

Available types:
1 – Numbers
A – Uppercase letters
a – Lowercase letters
I – Roman numbers
i – Small roman numbers

Roman Number List Example

<ol type="I">
  <li>Introduction</li>
  <li>Features</li>
  <li>Conclusion</li>
</ol>

Documents और outlines में roman style common है।

Start Attribute

start attribute से numbering किसी भी number से शुरू कर सकते हैं।

<ol start="5">
  <li>Chapter Five</li>
  <li>Chapter Six</li>
</ol>

यह long lists में continuation के लिए उपयोगी होता है।

Reversed Ordered List

HTML5 में list को reverse order में दिखाया जा सकता है।

<ol reversed>
  <li>Third</li>
  <li>Second</li>
  <li>First</li>
</ol>

Countdown और priority lists के लिए useful है।

Nested Ordered Lists

Ordered list के अंदर दूसरी ordered list बनाई जा सकती है।

<ol>
  <li>Frontend
    <ol>
      <li>HTML</li>
      <li>CSS</li>
    </ol>
  </li>
  <li>Backend</li>
</ol>

Complex instructions दिखाने के लिए nested lists काम आती हैं।

Ordered और Unordered List साथ में (Mixed Lists Example)

<ol>
  <li>Hardware
    <ul>
      <li>Keyboard</li>
      <li>Mouse</li>
    </ul>
  </li>
  <li>Software</li>
</ol>

Mixed lists real-world layouts में common हैं। Ordered list के अंदर unordered list भी use की जा सकती है, इसका उल्टा भी किया जा सकता है। यह detailed steps explain करने में मदद करता है।

List Style Control with CSS

CSS से numbering style और position control किया जा सकता है। Design requirements के अनुसार list style बदली जा सकती है।

<style>
ol {
  list-style-type: upper-roman;
}
</style>

Remove Numbers from Ordered List

<style>
ol {
  list-style-type: none;
}
</style>

Special layouts में numbering hide की जा सकती है। Custom counters या designs के लिए यह technique use होती है।

Spacing Control

<style>
li {
  margin-bottom: 10px;
}
</style>

Readable spacing user experience बेहतर बनाता है।

Accessibility और Ordered Lists

Ordered lists screen readers को content का sequence समझने में मदद करती हैं।
Steps और instructions के लिए ordered list use करना accessibility best practice है।

Common Mistakes

Steps के लिए unordered list use करना
Wrong nesting structure
Too deep nested lists
CSS से numbering पूरी तरह hide कर देना

Best Practices

Steps और processes के लिए ordered list use करें
Proper numbering type choose करें
Long lists को readable रखें
Nested lists को limited रखें

Summary

HTML Ordered Lists items को sequence में display करती हैं।
<ol> और <li> tags इसके base हैं।
Type, start और reversed attributes से ordered lists flexible और powerful बनती हैं।