HTML
सूचियाँ

परिचय

वाक्य - विन्यास

• <ol> ordered list items </ol>
• <ul> unordered list items </ul>
• <li> list item (ordered and not) </li>
• <dl> description list items </dl>
• <dt> description list title </dt>
• <dd> description list description </dd>

टिप्पणियों

अव्यवस्थित सूची

एक अनियंत्रित सूची <ul> टैग के साथ बनाई जा सकती है और प्रत्येक सूची आइटम <li> टैग के साथ बनाया जा सकता है जैसा कि नीचे दिए गए उदाहरण द्वारा दिखाया गया है:

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

यह एक बुलेटेड सूची का उत्पादन करेगा (जो कि डिफ़ॉल्ट शैली है):

• मद
• एक और आइटम
• फिर भी एक और आइटम

आपको मदों की एक सूची प्रदर्शित करने के लिए ul का उपयोग करना चाहिए, जहां वस्तुओं का क्रम महत्वपूर्ण नहीं है। यदि आइटम के क्रम को बदलने से सूची गलत हो जाती है, तो आपको <ol> उपयोग करना चाहिए।

आदेशित सूचि

एक आदेशित सूची <ol> टैग के साथ बनाई जा सकती है और प्रत्येक सूची आइटम <li> टैग के साथ नीचे दिए गए उदाहरण में बनाया जा सकता है:

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

यह एक क्रमांकित सूची का उत्पादन करेगा (जो कि डिफ़ॉल्ट शैली है):

1. मद
2. एक और आइटम
3. फिर भी एक और आइटम

मैन्युअल रूप से नंबर बदल रहे हैं

ऐसे कुछ तरीके हैं जिनसे आप खेल सकते हैं कि कौन सी संख्या एक ऑर्डर की गई सूची में सूची आइटम पर दिखाई देती है। पहला तरीका start विशेषता का उपयोग करके, एक शुरुआती संख्या निर्धारित start है। सूची इस निर्धारित संख्या पर शुरू होगी, और हमेशा की तरह एक-एक वेतन वृद्धि जारी रखेंगी।

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

यह एक क्रमांकित सूची का उत्पादन करेगा (जो कि डिफ़ॉल्ट शैली है):

3. मद
4. कुछ अन्य आइटम
5. फिर भी एक और आइटम

आप किसी विशिष्ट सूची आइटम को किसी विशिष्ट संख्या में स्पष्ट रूप से सेट कर सकते हैं। एक निर्दिष्ट मूल्य के साथ एक के बाद एक और सूची आइटम उस सूची आइटम के मूल्य से एक के बाद एक बढ़ाना जारी रखेंगे, जहां अनदेखी मूल सूची में थी।

<li value="7"></li>

यह भी ध्यान देने योग्य है कि, किसी सूची आइटम पर सीधे value विशेषता का उपयोग करके, आप कम मूल्य पर नंबरिंग को पुनरारंभ करके आदेशित सूची की मौजूदा नंबरिंग प्रणाली को ओवरराइड कर सकते हैं। इसलिए यदि मूल सूची पहले से ही मान 7 तक थी, और मूल्य 4 पर एक सूची आइटम का सामना करना पड़ा, तो वह सूची आइटम अभी भी 4 के रूप में प्रदर्शित होगा और उस बिंदु से फिर से गिनती जारी रखेगा।

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

तो ऊपर दिया गया उदाहरण 5, 6, 4, 5, 6 के नंबरिंग पैटर्न का अनुसरण करने वाली सूची का उत्पादन करेगा - फिर से पिछले की तुलना में कम संख्या में शुरू करना और सूची में 6 नंबर की नकल करना।

नोट: start और value विशेषताएँ केवल एक संख्या को स्वीकार करती हैं - भले ही आदेशित सूची रोमन अंकों या अक्षरों के रूप में प्रदर्शित करने के लिए सेट हो।

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

अंक का प्रकार बदलना

आप type विशेषता का उपयोग करके आसानी से सूची आइटम मार्कर में दिखाए गए अंकों के प्रकार को बदल सकते हैं

<ol type="1|a|A|i|I">

आपको आइटम की एक सूची प्रदर्शित करने के लिए ol का उपयोग करना चाहिए, जहां आइटम जानबूझकर ऑर्डर किए गए हैं और ऑर्डर पर जोर दिया जाना चाहिए। यदि आइटम के क्रम को बदलने से सूची गलत नहीं होती है, तो आपको <ul> उपयोग करना चाहिए।

विवरण सूची

एक विवरण सूची (या परिभाषा सूची , जैसा कि इसे HTML5 से पहले कहा गया था) को dl तत्व के साथ बनाया जा सकता है। इसमें नाम-मान समूह होते हैं, जहाँ नाम dt तत्व में दिया जाता है, और dd तत्व में मान दिया जाता है।

<dl>
  <dt>name 1</dt>
  <dd>value for 1</dd>
  <dt>name 2</dt>
  <dd>value for 2</dd>
</dl>

लाइव डेमो

एक नाम-मूल्य समूह में एक से अधिक नाम और / या एक से अधिक मूल्य हो सकते हैं (जो विकल्पों का प्रतिनिधित्व करते हैं):

<dl>

  <dt>name 1</dt>
  <dt>name 2</dt>
  <dd>value for 1 and 2</dd>

  <dt>name 3</dt>
  <dd>value for 3</dd>
  <dd>value for 3</dd>

</dl>

लाइव डेमो

नेस्टेड सूची

आप किसी सूची आइटम के उप-आइटम का प्रतिनिधित्व करने के लिए सूचियों को घोंसला कर सकते हैं।

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>sub-item 2.1</li>
      <li>sub-item 2.2</li>
    </ul>
  </li>
  <li>item 3</li>
</ul>

• वस्तु 1
• आइटम 2
  • उप मद 2.1
  • उप-मद 2.2
• आइटम 3

नेस्टेड लिस्ट में li एलिमेंट का बच्चा होना है।

आप विभिन्न प्रकार की सूची भी बना सकते हैं:

<ol>
    <li>Hello, list!</li>
    <li>
        <ul>
            <li>Hello, nested list!</li>
        </ul>
    </li>
</ol>