सूचियाँ

docs.scrimba.com

वेब पेज का एक आश्चर्यजनक हिस्सा वास्तव में एक सूची है: नेविगेशन मेनू, खोज परिणाम, उत्पाद ग्रिड, किसी रेसिपी की सामग्री, पासवर्ड रीसेट करने के चरण। जब भी सामग्री संबंधित वस्तुओं का एक समूह हो, HTML के पास एक तत्व है जो ऐसा कहता है, और इसका उपयोग करने का मतलब है कि ब्राउज़र और जो कोई भी सहायक सॉफ़्टवेयर के साथ पढ़ रहा है, वह जानता है कि आइटम एक साथ हैं।

अक्रमबद्ध सूचियाँ

जब आइटम का क्रम महत्वपूर्ण नहीं होता है, तो आप एक अक्रमबद्ध सूची का उपयोग करते हैं। एक शॉपिंग सूची के बारे में सोचें: दूध, ब्रेड, अंडे। यह महत्वपूर्ण नहीं है कि आप पहले कौन सा लिखते हैं, वे एक साथ समूहीकृत चीजों का एक समूह हैं।

आप दो टैग के साथ एक बनाते हैं। <ul> टैग पूरी सूची को लपेटता है, और प्रत्येक आइटम अपने स्वयं के <li> टैग ("list item") के अंदर जाता है:

<ul>
  <li>दूध</li>
  <li>ब्रेड</li>
  <li>अंडे</li>
</ul>

ब्राउज़र प्रत्येक आइटम को अपनी लाइन पर एक बुलेट पॉइंट के साथ दिखाता है। आपने स्वयं बुलेट या लाइन ब्रेक नहीं जोड़े, ब्राउज़र ऐसा करता है क्योंकि आपने इसे बताया कि यह एक सूची है।

एक अक्रमबद्ध सूची वस्तुओं का एक समूह है जहाँ क्रम का कोई अर्थ नहीं है। <ul> तत्व कंटेनर है, और हर सीधा बच्चा एक <li> तत्व है जो एक आइटम रखता है:

<ul>
  <li>£40 से अधिक पर मुफ्त शिपिंग</li>
  <li>30 दिनों के भीतर रिटर्न</li>
  <li>दो साल की वारंटी</li>
</ul>

एक नियम जो समझना आसान है: <ul> के सीधे बच्चे के रूप में केवल <li> की अनुमति है। आप <p> या <div> को सीधे <ul> के अंदर नहीं रखते हैं। यदि आप किसी आइटम में एक पैराग्राफ या एक लिंक चाहते हैं, तो यह <li> के अंदर जाता है, जो कोई भी सामग्री रख सकता है।

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

एक अक्रमबद्ध सूची वस्तुओं के एक समूह को चिह्नित करती है जिनका क्रम महत्वपूर्ण नहीं है। <ul> कंटेनर है और प्रत्येक आइटम एक <li> है; <ul> के एकमात्र अनुमत सीधे बच्चे <li> तत्व हैं (और <template> जैसे स्क्रिप्ट-समर्थन तत्व), इसलिए <ul> और इसके आइटम के बीच एक नंगा <div> रखना अमान्य है और पार्सर इसे सूची का हिस्सा नहीं मानेगा।

<ul>
  <li>£40 से अधिक पर मुफ्त शिपिंग</li>
  <li>30 दिनों के भीतर रिटर्न</li>
  <li>दो साल की वारंटी</li>
</ul>

बुलेट मार्कर और इंडेंटेशन ब्राउज़र की अंतर्निहित स्टाइलशीट से प्रस्तुति संबंधी डिफ़ॉल्ट हैं, अर्थ नहीं; list-style: none बिना तत्व के अर्थ को बदले उन्हें हटा देता है। यह अंतर महत्वपूर्ण है क्योंकि अर्थ तत्व में रहता है, बुलेट केवल पेंट है। सहायक सॉफ़्टवेयर (स्क्रीन रीडर जैसे उपकरणों के लिए एक छत्र शब्द, जो जो लोग इसे नहीं देख सकते हैं उनके लिए पृष्ठ को जोर से बोलते हैं) संरचना को पढ़ते हैं, मार्कर को नहीं: यह घोषणा करता है कि एक सूची शुरू हो रही है और इसमें कितने आइटम हैं। हम नेस्टिंग पर Deep Dive में वापस आते हैं कि यह आपको क्या खरीदता है।

Junoअक्रमबद्ध सूचियाँ<ul> का उपयोग एक सूची के लिए करें जहाँ क्रम महत्वपूर्ण नहीं है, और प्रत्येक आइटम को अपने स्वयं के <li> में लपेटें। ब्राउज़र आपके लिए बुलेट और लाइन ब्रेक जोड़ता है, इसलिए आप कभी उन्हें हाथ से नहीं टाइप करते हैं। इसमें विश्वास करने में मुझे थोड़ा समय लगा, मैं हमेशा डॉट्स को स्वयं जोड़ना चाहता था।

Junoअक्रमबद्ध सूचियाँ<ul> कंटेनर है, और इसके एकमात्र सीधे बच्चे <li> आइटम हैं। कुछ समृद्ध, एक लिंक, एक पैराग्राफ, <li> के अंदर जाता है, कभी <ul> में ढीला नहीं। बुलेट डिफ़ॉल्ट स्टाइलिंग हैं जिन्हें आप बाद में बदल सकते हैं, इसलिए अपनी उपस्थिति के लिए नहीं, इसके अर्थ के लिए तत्व चुनें।

Junoअक्रमबद्ध सूचियाँ<ul> केवल <li> को सीधे बच्चे के रूप में लेता है, इसलिए वहाँ एक आवारा <div> अमान्य मार्कअप है। बुलेट ब्राउज़र स्टाइलशीट से है, अर्थ नहीं, इसलिए list-style: none डॉट को छीन लेता है और सूची को रखता है। यह अंतर ठीक यही कारण है कि एक स्क्रीन रीडर आपके CSS ने मार्कर छुपाने के बाद भी आइटम गिन सकता है।

क्रमबद्ध सूचियाँ और उनकी विशेषताएँ

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

यह एक अक्रमबद्ध सूची की तरह ठीक काम करता है, लेकिन कंटेनर <ul> के बजाय <ol> है:

<ol>
  <li>ओवन को 180°C पर प्रीहीट करें</li>
  <li>आटा और चीनी मिलाएँ</li>
  <li>टिन में डालें और 25 मिनट के लिए बेक करें</li>
</ol>

अब ब्राउज़र बुलेट के बजाय आइटम के सामने 1, 2, 3 रखता है। यदि आप बाद में बीच में एक नया चरण जोड़ते हैं, तो संख्याएँ स्वयं को फिर से नंबर देती हैं। आप कभी संख्याएँ टाइप नहीं करते हैं, और <ol> का उपयोग करने का यही मुद्दा है।

एक क्रमबद्ध सूची उन आइटम के लिए है जिनका क्रम अर्थ रखता है। <ul> के समान संरचना, कंटेनर को <ol> में स्वैप करें, और ब्राउज़र प्रत्येक <li> को स्वचालित रूप से नंबर देता है। क्योंकि संख्याएँ उत्पन्न होती हैं, एक आइटम को सम्मिलित या हटाने से बाकी को मुफ्त में फिर से नंबर दिया जाता है।

<ol> के पास जानने योग्य तीन विशेषताएँ हैं। start उस संख्या को सेट करता है जिससे सूची शुरू होती है:

<ol start="4">
  <li>अंडों को फेंटें</li>
  <li>आटा मोड़ो</li>
</ol>

वह सूची 4, 5 चलाती है। यह तब उपयोगी है जब कोई सूची कुछ अन्य सामग्री के बाद जारी रहती है जिसने इसे दो में विभाजित किया है।

type क्रमांकन शैली को बदलता है: 1 संख्याओं के लिए (डिफ़ॉल्ट), A या a अक्षरों के लिए, I या i रोमन अंकों के लिए।

<ol type="a">
  <li>अपना साक्ष्य एकत्र करें</li>
  <li>सारांश लिखें</li>
</ol>

वह सूची 1, 2 के बजाय a, b चलाती है। और reversed नीचे की ओर गिनता है, जो एक उलटी गिनती या एक शीर्ष-पाँच रैंकिंग के लिए उपयुक्त है जिसे नीचे से ऊपर तक पढ़ा जाता है:

<ol reversed>
  <li>कांस्य</li>
  <li>चाँदी</li>
  <li>सोना</li>
</ol>

एक क्रमबद्ध सूची उन आइटम को चिह्नित करती है जिनका क्रम अर्थपूर्ण है; <ol> प्रत्येक <li> को उत्पन्न मानों से संख्या देता है, इसलिए क्रमांक कभी सामग्री नहीं है जिसे आप टाइप करते हैं और जब आइटम चलते हैं तो सही रहते हैं।

तीन विशेषताएँ क्रमांकन को नियंत्रित करती हैं। start पहले क्रमांक को एक पूर्णांक के रूप में सेट करता है भले ही प्रदर्शन शैली क्या हो, इसलिए एक रोमन-अंक सूची पर start="4" iv पर शुरू होता है। type मार्कर शैली सेट करता है: 1, A, a, I, या i। reversed (एक बूलियन विशेषता, जिसका अर्थ है इसकी उपस्थिति अकेले मान है, इसे सेट करने के लिए कुछ भी नहीं) 1 तक आइटम गणना से नीचे गिनता है।

<ol type="I" start="4" reversed>
  <li>नींव</li>
  <li>रोलआउट</li>
  <li>समीक्षा</li>
</ol>

स्टाइलिंग छुपा सकता है एक अंतर है। type केवल इस बात को बदलता है कि मार्कर कैसे खींचा जाता है; मान जो सहायक सॉफ़्टवेयर को घोषित किया जाता है और start द्वारा उपयोग किया जाता है वह हमेशा अंतर्निहित पूर्णांक है। इसलिए अक्षरों के साथ स्टाइल की गई एक सूची अभी भी अंतर्निहित पदों 1, 2, 3 है। जब क्रमांक सामग्री का ही हिस्सा होता है, एक कानूनी खंड उद्धरण के लिए क्रमांकित, <ol> को संख्या का मालिक होने देना पसंद करते हैं पाठ में इसे हार्ड-कोडिंग के बजाय, क्योंकि <li> में एक हार्ड-कोडित "3." फिर से नंबर नहीं होगा और एक स्क्रीन रीडर इसे दो बार पढ़ेगा: एक बार उत्पन्न मार्कर के रूप में और एक बार पाठ के रूप में। एक और नियंत्रण जानने लायक है: एक व्यक्तिगत <li> पर value विशेषता उस एक आइटम की संख्या को ओवरराइड करता है और सूची वहाँ से गिनना जारी रखती है।

Junoक्रमबद्ध सूचियाँ और उनकी विशेषताएँ<ol> तक पहुँचें जब क्रम महत्वपूर्ण हो, जैसे किसी रेसिपी के चरण, और ब्राउज़र आपके लिए आइटम को नंबर देता है। एक चरण जोड़ें या निकालें और संख्याएँ स्वयं को ठीक करती हैं, इसलिए आप कभी 1. या 2. हाथ से टाइप नहीं करते हैं। पहले जैसी ही <li> आइटम, केवल एक अलग कंटेनर।

Junoक्रमबद्ध सूचियाँ और उनकी विशेषताएँ<ol> आपको तीन सुविधाजनक विशेषताएँ देता है: 1 के अलावा किसी अन्य संख्या से शुरू करने के लिए start, अंकों के बजाय अक्षरों या रोमन अंकों के लिए type, और नीचे गिनने के लिए reversed। वे सभी अभी भी ब्राउज़र को संख्याएँ उत्पन्न करने देते हैं, जो आप क्रमबद्ध सूची का उपयोग करने का कारण है।

Junoक्रमबद्ध सूचियाँ और उनकी विशेषताएँtype केवल मार्कर को रीस्टाइल करता है; इसके पीछे का मान, जो start उपयोग करता है और सहायक तकनीक पढ़ता है, हमेशा पूर्णांक है। इसलिए <li> में "3." को हाथ से टाइप न करें, या यह फिर से नंबर नहीं होगा और एक स्क्रीन रीडर संख्या को दो बार कहता है। <ol> को गणना पर रखने दें, और जब आपको एक आइटम को धक्का देने की आवश्यकता हो तो एक एकल <li> पर value का उपयोग करें।

विवरण सूचियाँ

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

यह एक विवरण सूची है, और यह तीन टैग का उपयोग करता है। <dl> पूरी चीज को लपेटता है, <dt> प्रत्येक शब्द को रखता है, और <dd> विवरण को रखता है जो इसके साथ जाता है:

<dl>
  <dt>HTML</dt>
  <dd>वह भाषा जो एक पृष्ठ की संरचना का वर्णन करती है।</dd>
  <dt>CSS</dt>
  <dd>वह भाषा जो पृष्ठ की दिखावट का वर्णन करती है।</dd>
</dl>

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

जब प्रत्येक आइटम एक अकेली चीज के बजाय एक जोड़ी होती है, तो एक विवरण सूची <ul> या <ol> से बेहतर फिट करती है। यह तीन तत्वों से बना है: <dl> कंटेनर है, <dt> एक शब्द है, और <dd> इसके से जुड़ा विवरण है।

<dl>
  <dt>लेखक</dt>
  <dd>राज कुमार</dd>
  <dt>प्रकाशित</dt>
  <dd>14 मार्च 2024</dd>
  <dt>पढ़ने का समय</dt>
  <dd>6 मिनट</dd>
</dl>

यह उदाहरण शब्दकोषों से परे दूसरे बड़े उपयोग को दिखाता है: कुंजी/मान मेटाडेटा, लेबल और उनके मानों का एक समूह। समूहीकरण लचीला है। एक <dt> के बाद कई <dd> तत्व हो सकते हैं जब किसी शब्द के एक से अधिक विवरण हों, और कई <dt> तत्व एक ही <dd> साझा कर सकते हैं जब कई शब्दों का एक ही अर्थ हो। किसी भी समय जब आपकी सामग्री स्वाभाविक रूप से "यह, और इसका विवरण" हो तब <dl> का उपयोग करें, और जब आइटम अपने आप में खड़े हों तब <ul> या <ol> का उपयोग करें।

एक विवरण सूची नाम को मानों से जोड़ता है। <dl> कंटेनर है; <dt> एक शब्द (नाम) है; <dd> एक विवरण (मान) है। यह संरचना जिसे ब्राउज़र और सहायक सॉफ़्टवेयर समझते हैं वह समूहों का एक क्रम है, जहाँ एक समूह एक या अधिक <dt> तत्व होते हैं जिसके बाद एक या अधिक <dd> तत्व होते हैं।

<dl>
  <dt>संग्रहण</dt>
  <dt>क्षमता</dt>
  <dd>256 GB SSD</dd>

  <dt>रंग</dt>
  <dd>ग्रेफाइट</dd>
  <dd>चाँदी</dd>
</dl>

यह लचीलापन बिंदु है: कई शब्द एक विवरण साझा कर सकते हैं, और एक शब्द कई विवरण ले सकता है। दो व्यावहारिक फिट बाहर खड़े होते हैं। पहला शब्द-और-परिभाषा सामग्री है जैसे एक शब्दकोष। दूसरा कुंजी/मान मेटाडेटा है, एक विशिष्टता तालिका या पोस्ट विवरण का एक सेट, जहाँ प्रत्येक लेबल अपने मान के साथ जोड़ा जाता है; एक <dl> कहता है "ये नाम/मान जोड़े हैं" एक तरह से <div>s का स्टैक कभी नहीं करता है। नामकरण क्विर्क पर ध्यान दें: <dt> और <dd> ऐतिहासिक रूप से "definition term" और "definition description" के लिए खड़े थे, लेकिन आधुनिक विनिर्देश जानबूझकर उन्हें किसी भी नाम/मान संबंध तक, शब्दकोष परिभाषाओं अकेले नहीं, विस्तृत किया। यदि आपकी सामग्री समानों की एक सपाट सूची है जिसमें कोई जोड़ी नहीं है, तो एक <dl> गलत उपकरण है और <ul> ईमानदार है।

Junoविवरण सूचियाँ एक विवरण सूची जोड़े के लिए है: एक शब्द और इसका अर्थ। पूरी चीज के चारों ओर <dl> का उपयोग करें, प्रत्येक शब्द के लिए <dt>, और विवरण के लिए <dd> जो इसके बाद आता है। एक शब्दकोष वह चित्र है जो आपके सिर में रखना है, शब्द फिर परिभाषा, शब्द फिर परिभाषा।

Junoविवरण सूचियाँ जब प्रत्येक आइटम एक जोड़ी हो, एक शब्द और इसका विवरण या एक लेबल और इसका मान, समानों के एक समूह को नहीं <dl> तक पहुँचें। समूहीकरण फिट करने के लिए झुकता है: एक <dt> कई <dd>s ले सकता है, और कई <dt>s एक <dd> साझा कर सकते हैं। लेखक और दिनांक जैसा कुंजी/मान मेटाडेटा वह है जहाँ यह शब्दकोषों से परे अपना स्थान प्राप्त करता है।

Junoविवरण सूचियाँ<dl> का अर्थ नाम/मान जोड़े हैं, और विनिर्देश ने शब्दकोष परिभाषाओं को अकेले किसी भी लेबल-और-मान तक <dt> और <dd> को चौड़ा किया, तो मेटाडेटा निष्पक्ष खेल है। कई शब्द एक मान साझा कर सकते हैं और एक शब्द कई मान रख सकता है, जो <div>s की एक दीवार कभी भी व्यक्त नहीं कर सकती है। यदि आइटम समानों हैं जिसमें जोड़ने के लिए कुछ नहीं है, तो वह एक <ul> है, <dl> नहीं।

सूचियों को नेस्ट करना

सूचियाँ अन्य सूचियों के अंदर जा सकती हैं। एक मेनू में "पेय" हो सकते हैं जिसके अंतर्गत गर्म और ठंडे विकल्प हैं, और उनमें से प्रत्येक के अपने विकल्प हैं। एक सूची को दूसरे के अंदर रखना नेस्टिंग कहलाता है।

सही बनाने के लिए मुख्य बात: आंतरिक सूची एक <li> के अंदर जाती है, वस्तुओं के बीच नहीं। आप पूरे <ul> (या <ol>) को उस सूची आइटम के अंदर रखते हैं जिससे यह संबंधित है:

<ul>
  <li>पेय
    <ul>
      <li>कॉफी</li>
      <li>चाय</li>
    </ul>
  </li>
  <li>नाश्ता</li>
</ul>

"कॉफी" और "चाय" "पेय" का हिस्सा हैं, इसलिए उनकी छोटी सूची "पेय" वस्तु के अंदर रहती है। ब्राउज़र आंतरिक सूची को थोड़ा अधिक इंडेंट करता है, इसलिए आप देख सकते हैं कि यह इसके ऊपर की वस्तु से संबंधित है।

यह दिखाने के लिए कि कुछ वस्तुएँ किसी अन्य वस्तु के अंतर्गत हैं, आप एक सूची को एक सूची के अंदर नेस्ट करते हैं। नियम जो इसे वैध रखता है: एक नेस्ट की गई सूची एक <li> का बच्चा है, कभी बाहरी <ul> या <ol> का सीधा बच्चा नहीं। आंतरिक सूची उस आइटम के अंदर बैठती है जिसे वह विस्तृत करता है।

<ul>
  <li>फल
    <ul>
      <li>सेब</li>
      <li>केले</li>
    </ul>
  </li>
  <li>सब्जियाँ
    <ul>
      <li>गाजर</li>
      <li>पालक</li>
    </ul>
  </li>
</ul>

आप नेस्ट करते समय प्रकार मिश्रा सकते हैं, एक <ol> एक <ul> के अंदर या इसके विपरीत, और जितना गहरा सामग्री ईमानदारी से जाती है। आप जहाँ नेस्ट की गई सूचियों से मिलते हैं सबसे आम जगह वास्तविक कोड में एक नेविगेशन मेनू है जिसमें सबमेनू हैं: शीर्ष-स्तर की वर्गों की एक सूची, प्रत्येक अपने <li> के अंदर पृष्ठों की अपनी सूची के साथ।

नेस्टिंग यह है कि पदानुक्रम कैसे व्यक्त किया जाता है: एक उप-सूची उस <li> के अंदर रखी जाती है जिससे यह संबंधित है, कभी माता-पिता <ul> या <ol> का सीधा बच्चा नहीं। गलत होना (एक <ul> सीधे दूसरे <ul> के अंदर बैठा) अमान्य है, और पार्सर की वसूली हमेशा आपकी चित्रित छवि से मेल नहीं खाती।

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

यह किसी भी सूची के लिए सत्य परीक्षा की ओर जाता है। एक नेविगेशन मेनू (पृष्ठों के बीच आगंतुकों को स्थानांतरित करने वाले लिंक का सेट, अधिकांश साइटों के शीर्ष पर पंक्ति) है गंतव्य की एक सूची, इसलिए शब्दार्थ रूप से सही मार्कअप एक <nav> तत्व के अंदर लिंक का <ul> है जो क्षेत्र को नेविगेशन के रूप में लेबल करता है। एक असली सूची का उपयोग करें जब सामग्री संबंधित वस्तुओं का एक समूह हो, चाहे CSS बाद में इसे कैसे भी दिखे। एक का उपयोग न करें जब यह न हो: असंबंधित ब्लॉकों के बीच अंतराल नकली करने के लिए उन्हें <li>s में लपेटना, सहायक सॉफ़्टवेयर को बताता है "ये तीन चीजें तीन का एक समूह हैं" जब वे नहीं हैं। मार्कर को छुपाया जा सकता है और लेआउट कुछ भी हो सकता है; <ul>, <ol>, या <dl> की पसंद हमेशा जवाब देनी चाहिए कि सामग्री वास्तव में क्या है।

Junoसूचियों को नेस्ट करना एक सूची को एक सूची के अंदर रखने के लिए, आंतरिक को <li> के अंदर ड्रॉप करें जिससे यह संबंधित है, वस्तुओं के बीच ढीला नहीं। ब्राउज़र इसे इंडेंट करता है इसलिए आप देख सकते हैं कि यह ऊपर की वस्तु का हिस्सा है। वह <li> के अंदर नियम यहाँ याद रखने के लिए एकमात्र चीज है।

Junoसूचियों को नेस्ट करना एक नेस्ट की गई सूची हमेशा <li> का बच्चा है, कभी बाहरी <ul> या <ol> का सीधा बच्चा नहीं। आप एक <ol> को <ul> के अंदर मिश्रा सकते हैं और जितना गहरा सामग्री वास्तव में है जाएँ। नेविगेशन मेनू सबमेनू के साथ वह है जहाँ आप इस सबसे अधिक से मिलेंगे, इसलिए यह अभी सहज होने योग्य है।

Junoसूचियों को नेस्ट करना उप-सूची को इसके <li> के अंदर रखें, क्योंकि एक स्क्रीन रीडर वस्तु गणना और नेस्टिंग गहराई को पढ़ता है, और यह बोली गई संरचना वह है जो उन लोगों के लिए इंडेंटेशन को प्रतिस्थापित करती है जो इसे नहीं देख सकते हैं। एक नव मेनू वास्तव में लिंक की एक सूची है, इसलिए इसे एक के रूप में चिह्नित करें; रिक्ति उधार लेने के लिए असंबंधित ब्लॉकों को <li>s में लपेटें। तत्व को यह कहने दें कि सामग्री वास्तव में क्या है, और इसे बाद में जैसे चाहें स्टाइल करें।