सूचियां

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

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

एचटीएमएल फ़ॉर्म में, <option> एलिमेंट की सूचियां, <datalist> <select> और <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 प्रॉपर्टी से कई और वैल्यू मिलती हैं.

codepen में बताया गया है कि list-style-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>'s start की वैल्यू को बदल देता है.

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

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

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

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

MLW में हमारे पास कुछ बिना क्रम वाली सूचियां हैं. शिक्षकों वाले सेक्शन में शिक्षकों की सूची होती है. इसी तरह, समीक्षा वाले सेक्शन में छात्र-छात्राओं के डिवाइसों की सूची होती है. शिक्षक के पास दो <ul> होते हैं: हर शिक्षक के लिए एक.<li> हर <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.</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 है. हालांकि, सीएसएस की मदद से सूची को हटाने पर, VoiceOver (iOS और MacOS का स्क्रीन रीडर) Safari में इंप्लिसिट सिमैंटिक्स को हटा सकता है. ऐसा तब भी हो सकता है, जब display: grid या list-style-type: none सेट किया गया हो. यह सुविधा है, कोई गड़बड़ी नहीं. आम तौर पर, सिमैंटिक एलिमेंट का इस्तेमाल करते समय, role एट्रिब्यूट को नहीं जोड़ना चाहिए, क्योंकि यह ज़रूरी नहीं है. आम तौर पर, आपको सूची में कोई आइटम जोड़ने की ज़रूरत नहीं होती. हालांकि, अगर उपयोगकर्ता को यह जानना ज़रूरी है कि यह सूची है, तो आपको ऐसा करना चाहिए. जैसे, अगर उपयोगकर्ता को यह जानने से फ़ायदा होता है कि सूची में कितने आइटम हैं.

जानकारी वाली सूचियां

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

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

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

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

जब शब्दों और उनकी परिभाषाओं या जानकारी की सूची बनाई जाती है या की-वैल्यू पेयर की ऐसी ही सूचियां बनाई जाती हैं, तो जानकारी देने वाली सूचियों के एलिमेंट सही सिमैंटिक उपलब्ध कराते हैं. <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> को नेस्ट करने की अनुमति है. ब्यौरे वाली सूची के किसी भी एलिमेंट में, एलिमेंट के हिसाब से कोई एट्रिब्यूट नहीं है.

अब जब आपको लिंक और सूचियों के बारे में पता चल गया है, तो हम इन दोनों को मिलाकर नेविगेशन बना सकते हैं.

देखें कि आपको कितना समझ आया

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