सूचियां

सूचियां बहुत आम हैं. अगर आपने कभी कोई प्रोग्रामिंग क्लास ली है, तो पहला प्रोजेक्ट ख़रीदारी की सूची या कामों की सूची बनाने का हो सकता है. ये सूचियां हैं. कई विकल्प वाले टेस्ट, आम तौर पर सवालों की नंबर वाली सूचियां होती हैं: हर सवाल के कई संभावित जवाब नेस्ट की गई सूचियां होती हैं.

एचटीएमएल में, हमें सूचियों को मार्कअप करने के कुछ अलग-अलग तरीके मिलते हैं. इसमें क्रम वाली सूचियां (<ol>), बिना क्रम वाली सूचियां (<ul>), और जानकारी की सूचियां (<dl>) मौजूद हैं. आइटम (<li>) क्रम वाली सूचियों और बिना क्रम वाली सूचियों में नेस्ट किए हुए हैं. ब्यौरे की सूची में आपको ब्यौरे वाले शब्द (<dt>) और ब्यौरा मिलेंगे <dd>.हम इन सभी के बारे में यहां बताएंगे.

एचटीएमएल फ़ॉर्म में, <option> एलिमेंट की सूचियों में <select> में मौजूद <datalist>, <select>, और <optgroup> का कॉन्टेंट शामिल होता है. इनके बारे में एचटीएमएल फ़ॉर्म में बताया गया है.

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

डिफ़ॉल्ट रूप से, क्रम से लगाए गए और बिना क्रम वाली सूची में मौजूद आइटम के पहले नंबर या बुलेट पॉइंट होते हैं. हालांकि, जब आपको सूचियों को सूचियों की तरह नहीं दिखाना हो, तब भी आपको नेविगेशन बार में, बुलेट के बजाय चेकबॉक्स वाली टू-डू लिस्ट या कई विकल्प वाले टेस्ट में सही और गलत सवालों की सूची चाहिए. बिना बुलेट वाली सभी सूचियों के लिए, एचटीएमएल सूची के एलिमेंट का इस्तेमाल करना सही है.

बिना क्रम वाली सूचियां

<ul> एलिमेंट, आइटम की बिना क्रम वाली सूचियों का पैरंट एलिमेंट है. <ul> के एक या एक से ज़्यादा <li> सूची में शामिल आइटम एलिमेंट ही होते हैं. चलिए, मशीन की सूची बनाते हैं. हम एक बिना क्रम वाली सूची का इस्तेमाल करते हैं, क्योंकि क्रम से कोई फ़र्क़ नहीं पड़ता (उन्हें यह न बताएं):

डिफ़ॉल्ट रूप से, बिना क्रम वाली सूची के हर आइटम के शुरू में एक बुलेट पॉइंट होता है. बिना क्रम वाली सूची में एलिमेंट के बारे में कोई खास एट्रिब्यूट नहीं है. आपको </ul> की मदद से अपनी सूचियां बंद करनी होंगी.

क्रम वाली सूचियां

<ol> एलिमेंट, आइटम की क्रम वाली सूचियों का पैरंट एलिमेंट है. <ol> के चाइल्ड, एक या एक से ज़्यादा <li> एलिमेंट या सूची के आइटम होते हैं. हालांकि, इस मामले में "बुलेट" कई तरह की संख्याओं को दिखाता है. इस टाइप को सीएसएस में, list-style-type प्रॉपर्टी या type एट्रिब्यूट के ज़रिए तय किया जा सकता है.

<ol> में, एलिमेंट के लिए खास तौर पर तीन एट्रिब्यूट होते हैं: type, reversed, और start.

गिनती किया गया type एट्रिब्यूट, नंबर का टाइप सेट करता है. type के लिए पांच मान्य वैल्यू होती हैं और नंबरों के लिए डिफ़ॉल्ट वैल्यू 1 होती है. हालांकि, अंग्रेज़ी के छोटे और बड़े अक्षरों या रोमन अंकों के लिए a, A, i या I का इस्तेमाल भी किया जा सकता है. list-style-type प्रॉपर्टी से, और भी कई वैल्यू मिलती हैं.

जैसा कि कोडपेन में बताया गया है, list-style-type प्रॉपर्टी, type एट्रिब्यूट की वैल्यू को बदल देती है. हालांकि, ऐसे दस्तावेज़ लिखते समय type एट्रिब्यूट की वैल्यू बदल जाती है जहां संख्या का टाइप ज़रूरी है. जैसे, कानूनी दस्तावेज़ों में आपको type एट्रिब्यूट की वैल्यू शामिल करनी होगी.

अगर बूलियन reversed एट्रिब्यूट को शामिल किया जाए, तो यह संख्याओं के क्रम को उलटा कर देगी. इसमें, सबसे बड़ी संख्या से सबसे कम संख्या तक का क्रम शामिल होगा. start एट्रिब्यूट शुरुआती वैल्यू सेट करता है. डिफ़ॉल्ट वैल्यू 1 है.

</ul> की तरह ही, क्लोज़िंग </ol> को भरना ज़रूरी है.

हम सूचियों को नेस्ट कर सकते हैं, लेकिन उन्हें सूची में मौजूद आइटम में नेस्ट करना ज़रूरी है. याद रखें कि सिर्फ़ एक एलिमेंट जो <ul> या <ol> का चाइल्ड हो सकता है, वह एक या एक से ज़्यादा <li> एलिमेंट हो सकता है.

सूची आइटम

हमने <li> एलिमेंट का इस्तेमाल किया है, लेकिन हमने अभी तक इसे औपचारिक रूप से पेश नहीं किया है. <li> एलिमेंट, किसी बिना क्रम वाली सूची (<ul>), क्रम वाली सूची (<ol>) या मेन्यू (<menu>) का डायरेक्ट चाइल्ड हो सकता है. <li> को इनमें से किसी एक एलिमेंट के चाइल्ड के तौर पर नेस्ट किया जाना चाहिए और यह कहीं और मान्य नहीं है.

स्पेसिफ़िकेशन के मुताबिक, सूची में मौजूद आइटम को बंद करना ज़रूरी नहीं है. ऐसा इसलिए, क्योंकि जब ब्राउज़र को अगला <li> ओपनिंग टैग या सूची को बंद करने वाला ज़रूरी टैग: </ul>, </ol>, और </menu> मिलेगा, तो आइटम को साफ़ तौर पर बंद कर दिया जाएगा. हालांकि, खास जानकारी के लिए इसकी ज़रूरत नहीं है, और कंपनी की कुछ अंदरूनी सबसे अच्छी प्रक्रियाओं का सुझाव है कि कुछ बाइट बचाने के लिए आपको सूची में मौजूद आइटम बंद नहीं करने चाहिए, लेकिन अपने <li> टैग बंद कर दें. इससे आपके कोड को पढ़ना आसान हो जाता है और आने वाले समय में आपका धन्यवाद. सभी एलिमेंट को बंद करना आसान है, ताकि यह याद रखा जा सके कि किन टैग को बंद करना है और किस टैग में क्लोज़िंग टैग शामिल है. हालांकि, ऐसा करना ज़रूरी नहीं है.

हर एलिमेंट के लिए सिर्फ़ एक <li> एट्रिब्यूट है: value, एक पूर्णांक. value, <li> पर सिर्फ़ तब काम करता है, जब <li> को क्रम से लगाई गई सूची में नेस्ट किया गया हो. साथ ही, इसका मतलब बिना क्रम वाली सूचियों या मेन्यू से न हो. कोई कॉन्फ़्लिक्ट होने पर, यह <ol> की स्टार्ट की वैल्यू को बदल देती है.

value, क्रम वाली सूची में आइटम की संख्या होती है. सूची के बाद के आइटम के साथ, वैल्यू सेट से नंबर देना जारी रखें. ऐसा तब तक करें, जब तक उस आइटम में value एट्रिब्यूट सेट न हो. वैल्यू का क्रम होना ज़रूरी नहीं है. हालांकि, अगर यह क्रम में नहीं है, तो इसकी कोई खास वजह होनी चाहिए.

जब <ol> पर reversed को value एट्रिब्यूट की सूची के साथ जोड़ा जाता है, तो ब्राउज़र उस <li> को तय की गई वैल्यू पर सेट करता है. इसके बाद, उस वैल्यू से पहले के <li> को कैलकुलेट करता है. इसके बाद, उसके बाद आने वाले वैल्यू के लिए काउंट डाउन करता है. अगर सूची के दूसरे आइटम में वैल्यू एट्रिब्यूट है, तो काउंटर को सूची के उस दूसरे आइटम पर रीसेट कर दिया जाएगा और उसके बाद की वैल्यू एक कम हो जाएगी.

इन सभी चीज़ों को ::marker स्यूडो-एलिमेंट के लिए जनरेट किया गया कॉन्टेंट उपलब्ध कराने वाले सीएसएस काउंटर से भी कंट्रोल किया जा सकता है. अगर नंबर सिर्फ़ प्रज़ेंटेशन के तौर पर पेश किया गया है, तो सीएसएस का इस्तेमाल करें. अगर नंबरिंग के मतलब में यह नंबर ज़रूरी है या इसका कोई मतलब है, तो इन एट्रिब्यूट का इस्तेमाल करें.

अब तक, हमने सिर्फ़ टेक्स्ट नोड वाली सूची के आइटम देखे हैं. सूची में मौजूद आइटम में सभी फ़्लो कॉन्टेंट शामिल हो सकता है. इसका मतलब है कि शरीर में मौजूद ऐसा कोई भी एलिमेंट जिसे <body> के डायरेक्ट चाइल्ड के तौर पर नेस्ट किया जा सकता है. इसमें हेडिंग भी शामिल है, जिससे कॉन्टेंट को अलग-अलग सेक्शन में बांटा जा सकता है.

हमारे पास MLW में कुछ ऐसी सूचियां हैं जिनका क्रम नहीं है. इंस्ट्रक्टर सेक्शन में मौजूद शिक्षकों को एक सूची के तौर पर दिखाया जाता है. साथ ही, समीक्षा सेक्शन में छात्र-छात्राओं के लिए इस्तेमाल की गई मशीनें भी होती हैं. शिक्षक <ul> के पास दो <li>s हैं: हर शिक्षक के लिए एक. हर <li> में, एक इमेज और एक पैराग्राफ़ होता है:

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

समीक्षाओं वाले सेक्शन में तीन समीक्षाएं हैं, जबकि तीन <li> हैं. हर एक में एक इमेज, एक ब्लॉक कोटेशन, और तीन लाइन वाला पैराग्राफ़ होता है, जिसमें दो लाइन ब्रेक होती हैं.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has
    <span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

सूचियों में नेस्ट करना भी बहुत आम है. MLW में कोई नेस्ट की गई सूची नहीं है, लेकिन इस साइट में मौजूद है. इस सीरीज़ के पहले चैप्टर, एचटीएमएल की खास जानकारी, मुख्य एलिमेंट वाले सेक्शन में दो सब-सेक्शन हैं. विषय सूची, जो बिना क्रम वाली सूची होती है उसमें एक नेस्ट की गई बिना क्रम वाली सूची होती है, जिसमें इन दो सेक्शन के लिंक होते हैं:

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

<ul> का इकलौता चाइल्ड, <li> है. इसलिए, नेस्ट की गई सूची <li> में नेस्ट की जाती है, सीधे तौर पर <ol> या <ul> में नहीं.

इस पिछले उदाहरण में आपने देखा होगा कि role="list" को <ul> में शामिल किया गया है. <ul> और <ol>, दोनों की इंप्लिसिट रोल list है, लेकिन सीएसएस की मदद से सूची को हटाने के साथ-साथ, display: grid या list-style-type: none की सेटिंग को हटाने पर, VoiceOver (iOS और MacOS स्क्रीन रीडर) का इस्तेमाल किया जा सकता है. इससे Safari में इंप्लिसिट सिमेंटिक्स को हटाया जा सकता है. यह गड़बड़ी की जगह एक सुविधा है. आम तौर पर, आपको सिमैंटिक एलिमेंट का इस्तेमाल करते समय भूमिका एट्रिब्यूट नहीं जोड़ना चाहिए, क्योंकि ऐसा करना ज़रूरी नहीं है. आम तौर पर आपको सूची में किसी एक को जोड़ने की भी ज़रूरत नहीं होती, जब तक कि उपयोगकर्ता को यह जानना ज़रूरी न हो कि यह सूची है. जैसे, सूची में कितने आइटम हैं, यह जानने से उपयोगकर्ता को कब फ़ायदा होगा.

ब्यौरे की सूचियां

जानकारी की सूची, ब्यौरे की सूची (<dl>) एलिमेंट होती है जिसमें (शून्य या ज़्यादा) ब्यौरे के शब्द (<dt>) और उनकी ब्यौरे की जानकारी (<dd>) की सीरीज़ होती है. इन तीन एलिमेंट के मूल नाम, "परिभाषा की सूची", "परिभाषा के लिए शब्द", और "परिभाषा की परिभाषा" थे. लिविंग स्टैंडर्ड में नाम बदल गया है.

क्रम वाली और बिना क्रम वाली सूचियों की तरह, उन्हें भी नेस्ट किया जा सकता है. क्रम वाली और बिना क्रम वाली सूचियों के उलट, ये की/वैल्यू पेयर से बनी होती हैं. <ul> और <ol> की तरह ही, <dl> पैरंट कंटेनर है. <dt> और <dd> एलिमेंट, <dl> के चाइल्ड हैं.

हम मशीनों की एक सूची बना सकते हैं. इसमें उनके करियर के इतिहास और इच्छाओं को ध्यान में रखा जा सकता है. छात्र-छात्राओं की जानकारी वाली सूची, जिसके बारे में <dl> से बताया जाता है, उसमें कई शब्दों का समूह होता है—इस मामले में, "टर्म" छात्र-छात्राओं के नाम होते हैं, जिनकी जानकारी <dt> एलिमेंट के साथ दी जाती है और हर शब्द का ब्यौरा भी दिया जाता है. इस मामले में, हर छात्र/छात्रा के करियर के लक्ष्य की जानकारी <dd> एलिमेंट से तय होती है.

जानकारी की यह सूची, असल में MLW पेज का हिस्सा नहीं है. जानकारी की सूचियां सिर्फ़ शब्दों और परिभाषाओं के लिए नहीं होती हैं. इसलिए, एलिमेंट के नाम को ज़्यादा सामान्य बनाया गया है.

शब्दों की सूची और उनकी परिभाषाएं या ब्यौरे या की-वैल्यू पेयर की मिलती-जुलती सूचियां बनाते समय, एलिमेंट की जानकारी में सही सिमेंटिक्स उपलब्ध कराए जाते हैं. <dt> की इंप्लिसिट रोल term है. listitem को एक और अनुमति वाली भूमिका के तौर पर इस्तेमाल किया जा सकता है. <dd> की इंप्लिसिट रोल definition है. इसके अलावा, किसी और भूमिका की अनुमति नहीं है. <ul> और <ol> के उलट, <dl> में इंप्लिसिट ARIA रोल नहीं होता. यह इसलिए सही है, क्योंकि <dl> हमेशा सूची नहीं होती. हालांकि, ऐसा होने पर, यह list और group भूमिकाओं को स्वीकार करता है.

अक्सर आपको <dt> और <dd> एलिमेंट की बराबर संख्या वाली ब्यौरे की सूचियां दिखेंगी. हालाँकि, ब्यौरे की सूचियाँ हमेशा ज़रूरी नहीं होती हैं और उनका शब्द-से-ब्यौरे के जोड़े का मिलान होना ज़रूरी नहीं होता है; आपके पास एक से ज़्यादा या एक-से-ज़्यादा में एक से ज़्यादा परिभाषाएं हो सकती हैं, जैसे शब्दकोश में इस्तेमाल होने वाले किसी ऐसे शब्द की जिसमें एक से ज़्यादा परिभाषाएं हों.

हर <dt> से कम से कम एक <dd> जुड़ा है. साथ ही, हर <dd> से कम से कम एक <dt> जुड़ा है. सीएसएस के साथ इन एलिमेंट के वैरिएबल नंबर को टारगेट करने के लिए, आस-पास मौजूद सिबलिंग कॉमबिनेटर या :has() रिलेशनल सिलेक्टर का इस्तेमाल किया जा सकता है. अगर ज़रूरी हो, तो <div> को <dl> के चाइल्ड के तौर पर शामिल किया जा सकता है. साथ ही, एक या उससे ज़्यादा <dt> या <dd> एलिमेंट (या दोनों) के पैरंट की अनुमति दी जा सकती है. <dl> में कुछ और बच्चे हो सकते हैं: <div>, <template> या <script> को नेस्ट करने की अनुमति है. जानकारी की सूची के किसी भी एलिमेंट में, एलिमेंट के बारे में खास तरह की कोई विशेषता नहीं है.

अब आपको लिंक और सूचियों को समझने के बाद, नेविगेशन बनाने के लिए इन दोनों को एक साथ मिला दें.

जांचें कि आपको कितना समझ आया

सूचियों के बारे में अपनी जानकारी को परखें.