HTML Academy · पाठ

ऑर्डर्ड सूची: ol, start, reversed, type

क्रमांकित सूचियाँ बनाएँ और उनका क्रम अनुकूलित करें।

पाठ 2, कुल 4 में से13 चरण

ऑर्डर्ड सूची: ol, start, reversed, type, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

क्रमबद्ध सूची क्या है

क्रमबद्ध सूची उन वस्तुओं को दिखाती है जिनका क्रम महत्वपूर्ण होता है:

<ol>
  <li>Install Node.js</li>
  <li>Create project folder</li>
  <li>Run npm init</li>
  <li>Install dependencies</li>
</ol>

सूची तत्व

<ol> (क्रमबद्ध सूची) तत्व डिफ़ॉल्ट रूप से सूची-वस्तुओं को क्रमिक संख्याओं के साथ प्रदर्शित करता है:

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
<!-- Numbers are generated by the browser -->
<!-- You do not need to type 1. 2. 3. -->
<!-- Reordering items updates numbering automatically -->

आरंभ विशेषता

start विशेषता आरंभिक संख्या निर्धारित करती है:

<p>Steps 1-3 are covered in Part One. Continuing from step 4:</p>

<ol start="4">
  <li>Configure the database</li>
  <li>Set environment variables</li>
  <li>Run migrations</li>
</ol>
<!-- Numbers start at 4, 5, 6 -->

उलटा विशेषता

reversed विशेषता ऊपर गिनने के बजाय नीचे की ओर गिनती है:

<!-- Top 3 countdown -->
<ol reversed>
  <li>Bronze: 95 points</li>
  <li>Silver: 98 points</li>
  <li>Gold: 100 points</li>
</ol>
<!-- Renders: 3. Bronze... 2. Silver... 1. Gold -->
<!-- reversed is a boolean attribute — no value needed -->

प्रकार विशेषता

type विशेषता संकेतक की शैली बदलती है:

<ol type="1">...</ol>   <!-- 1, 2, 3 (default) -->
<ol type="a">...</ol>   <!-- a, b, c (lowercase letters) -->
<ol type="A">...</ol>   <!-- A, B, C (uppercase letters) -->
<ol type="i">...</ol>   <!-- i, ii, iii (lowercase Roman) -->
<ol type="I">...</ol>   <!-- I, II, III (uppercase Roman) -->

CSS बनाम HTML में प्रकार

HTML की type विशेषता की तुलना में CSS के list-style-type को प्राथमिकता दें:

<!-- HTML type (still valid): -->
<ol type="A">
  <li>Option A</li>
</ol>

<!-- CSS approach (separates concerns): -->
<!--
ol.lettered {
  list-style-type: upper-alpha;
}
-->
<ol class="lettered">
  <li>Option A</li>
</ol>

li पर मान विशेषता

value से अलग-अलग सूची-वस्तुओं की संख्या बदलें:

<ol>
  <li>First item</li>
  <li value="10">Tenth item</li>   <!-- jumps to 10 -->
  <li>Eleventh item</li>            <!-- continues: 11 -->
</ol>

नेस्ट की गई क्रमबद्ध और क्रमरहित सूचियाँ

सूचियों को नेस्ट किया जा सकता है — क्रमबद्ध और क्रमरहित सूचियों को मिलाएँ:

<ol>
  <li>
    Install tools
    <ul>
      <li>VS Code</li>
      <li>Node.js</li>
    </ul>
  </li>
  <li>Create project</li>
  <li>Write code</li>
</ol>

अर्थपूर्ण उपयोग के मामले

जब क्रम का महत्व हो, तब <ol> का उपयोग करें:

चरण-दर-चरण निर्देश
रैंक किए गए परिणाम (शीर्ष 10 सूचियाँ)
कानूनी दस्तावेज़ के अनुभाग
विधि के चरण
क्रमांकित अनुभागों वाली विषय-सूची

CSS में काउंटर रीसेट

CSS काउंटर आपको सूची क्रमांकन शैली पर पूरा नियंत्रण देते हैं:

ol {
  list-style: none;
  counter-reset: step;
}

ol li {
  counter-increment: step;
}

ol li::before {
  content: 'Step ' counter(step) ': ';
  font-weight: bold;
  color: #0070f3;
}

ब्रेडक्रंब के लिए ol

ब्रेडक्रंब नेविगेशन अर्थ की दृष्टि से एक क्रमबद्ध सूची है:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Documentation</a></li>
    <li><span aria-current="page">HTML Lists</span></li>
  </ol>
</nav>

त्वरित जाँच

कौन-सी विशेषता ol की गिनती को उलटा कर देती है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति: क्रमबद्ध सूचियाँ

क्रमबद्ध सूची की आवश्यक बातें:

<ol> — क्रमबद्ध सूची, जिसमें क्रम महत्वपूर्ण होता है
start — क्रमांकन किसी कस्टम संख्या से शुरू करें
reversed — नीचे की ओर गिनें
type — संकेतक बदलें: 1, a, A, i, I
<li> पर value — किसी एक वस्तु की संख्या बदलें
अधिक नियंत्रण के लिए CSS list-style-type और काउंटर का उपयोग करें

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “ऑर्डर्ड सूची: ol, start, reversed, type” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “ऑर्डर्ड सूची: ol, start, reversed, type” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“ऑर्डर्ड सूची: ol, start, reversed, type” में मैं क्या सीखूँगा?

क्रमांकित सूचियाँ बनाएँ और उनका क्रम अनुकूलित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“ऑर्डर्ड सूची: ol, start, reversed, type” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ