सूचियां

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

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

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

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

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

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

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

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

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

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

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

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

जैसा कि कोडपेन में बताया गया है, लिखने के दौरान 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> की शुरुआत की वैल्यू को बदल देता है.

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 सेटिंग भी शामिल हैं Safari में इंप्लिसिट सिमैंटिक्स को हटाने के लिए, VoiceOver (iOS और MacOS स्क्रीन रीडर) को लीड कर सकता है. यह एक सुविधा है, जो गड़बड़ी नहीं है. आम तौर पर, सिमैंटिक एलिमेंट का इस्तेमाल करते समय आपको भूमिका एट्रिब्यूट नहीं जोड़ना चाहिए, क्योंकि यह ज़रूरी नहीं है. आम तौर पर, आपको सूची में आइटम जोड़ने के लिए. ऐसा तब तक किया जा सकता है, जब तक उपयोगकर्ता को यह जानने की ज़रूरत न हो कि यह एक सूची है. जैसे, सूची में कितने आइटम हैं, यह जानने से उपयोगकर्ता को कोई फ़ायदा होगा.

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

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

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

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

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