HTML सूचियों को सही तरीके से नेस्ट करने के लिए, हर उपसूची को उस सूची आइटम के भीतर रखें जिससे वह संबंधित है, और उस आइटम के क्लोज़िंग टैग से पहले रखें। यह गाइड दिखाती है कि Mac पर TextEdit और Safari का उपयोग करके तीन स्तरों वाला उदाहरण कैसे बनाएँ, सेव करें और प्रीव्यू देखें।

नेस्ट की गई HTML सूची कहाँ रखनी चाहिए?

HTML सूची के दो संरचनात्मक हिस्से होते हैं: एक सूची कंटेनर और उसके आइटम। बिना क्रम वाली सूची के लिए <ul> और क्रम वाली सूची के लिए <ol> का उपयोग करें। हर सामान्य आइटम <li> और </li> के बीच रखा जाता है। नेस्ट की गई सूची इनमें से किसी एक आइटम के भीतर आती है। Google की सूचियों की गाइड इसी नेस्टिंग पैटर्न को दिखाती है।

ज़रूरी क्रम यह है: पैरेंट आइटम खोलें, उसका लेबल लिखें, पूरी उपसूची डालें, फिर पैरेंट आइटम बंद करें। क्लोज़िंग टैग को स्पष्ट रखने से संबंध जाँचना आसान होता है।

इस सही HTML अंश में Group A के दो चाइल्ड आइटम हैं और Group B बाहरी स्तर पर बना रहता है:

<ul>
  <li>Group A
    <ul>
      <li>Item A1</li>
      <li>Item A2</li>
    </ul>
  </li>
  <li>Group B</li>
</ul>

क्लोज़िंग टैग को भीतर से बाहर की ओर पढ़ें। पहले हर चाइल्ड आइटम बंद होता है। फिर भीतरी सूची </ul> से बंद होती है। उसके बाद Group A </li> से बंद होता है। इसके बाद ही Group B शुरू होता है। इससे एक व्यावहारिक जाँच मिलती है: पैरेंट के ओपनिंग और क्लोज़िंग टैग ढूँढ़ें और पुष्टि करें कि पूरी उपसूची उनके बीच है।

HTML Standard के अनुसार <li> तत्वों में फ्लो सामग्री हो सकती है, जिसमें सूचियाँ भी शामिल हैं। <ul> और <ol> के कंटेंट मॉडल में सूची आइटम और स्क्रिप्ट-सहायक तत्वों की अनुमति है; यह बाहरी कंटेनर के भीतर सीधे किसी अन्य सूची कंटेनर की अनुमति नहीं देता। HTML Standard की ग्रुपिंग-कंटेंट परिभाषाएँ देखें।

हर स्तर पर सूची का प्रकार अलग से चुनें

पूछें कि क्या आइटमों का क्रम बदलने से उनका अर्थ बदल जाएगा। अगर हाँ, तो <ol> चुनें। अगर आइटमों का अर्थ क्रम पर निर्भर नहीं करता और वे एक संग्रह हैं, तो <ul> चुनें। हर उपसूची के लिए इस प्रश्न का अलग से उत्तर दें। Mozilla का क्रम वाली सूची का दस्तावेज़ क्रम की इस कसौटी और अलग-अलग सूची प्रकारों को मिलाने के बारे में बताता है।

नीचे दिए गए उदाहरण में Group A और Group B तटस्थ श्रेणियाँ हैं, इसलिए उनकी बाहरी सूची बिना क्रम वाली है। Item A1 और Item A2 भी बिना क्रम वाला संग्रह हैं। Item A2 के अंतर्गत नमूना दस्तावेज़ खोलना, उसका नाम बदलने से पहले आता है, इसलिए उन दोनों निर्देशों के लिए क्रम वाली सूची का उपयोग किया गया है।

सामग्री का संबंध सूची का चयन स्थान
समूहों का संग्रह <ul> समूह आइटमों के चारों ओर
Group A से संबंधित आइटम <ul> Group A के <li> के भीतर
Item A2 से संबंधित क्रम <ol> Item A2 के <li> के भीतर
Group B से संबंधित आइटम <ul> Group B के अलग <li> के भीतर

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

TextEdit में नेस्ट की गई सूची वाला पूरा दस्तावेज़ बनाएँ

यह उदाहरण एक संपूर्ण HTML दस्तावेज़ है। इसमें काल्पनिक लेबल हैं और डाउनलोड की गई फ़ाइलों या अतिरिक्त कोड की ज़रूरत नहीं है। इसकी संरचना में चार सूचियाँ और आठ सूची आइटम हैं: दो बाहरी समूह, उन समूहों में बाँटे गए चार आइटम और Item A2 के अंतर्गत दो निर्देश।

TextEdit में File > New चुनें, फिर Format > Make Plain Text चुनें। नीचे दिया पूरा उदाहरण पेस्ट करें। Apple अपनी TextEdit HTML गाइड में HTML फ़ाइलें बनाने का यह सादा-पाठ तरीका बताता है।

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample workspace outline</title>
</head>
<body>
  <h1>Sample workspace outline</h1>
  <ul>
    <li>Group A
      <ul>
        <li>Item A1</li>
        <li>Item A2
          <ol>
            <li>Open the sample document.</li>
            <li>Rename the sample document.</li>
          </ol>
        </li>
      </ul>
    </li>
    <li>Group B
      <ul>
        <li>Item B1</li>
        <li>Item B2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

File > Save चुनें, फ़ाइल का नाम nested-lists.html रखें और उसे ऐसी जगह सेव करें जहाँ वह आसानी से मिल जाए। अगर TextEdit पूछे कि कौन-सा एक्सटेंशन इस्तेमाल करना है, तो Use .html चुनें। ये Apple के बताए गए HTML सेव करने के चरण हैं। केवल फ़ेंस वाले ब्लॉक के भीतर का कोड कॉपी करें; Markdown की फ़ेंस वाली पंक्तियाँ शामिल न करें।

Finder में सेव की गई फ़ाइल चुनें और File > Open With > Safari चुनें। Apple Mac पर फ़ाइल खोलने के लिए ऐप चुनें में File > Open With के ज़रिए ऐप चुनने का तरीका बताता है।

प्रीव्यू की तुलना इन अपेक्षित संबंधों से करें:

  • Group A और Group B बाहरी स्तर पर सिबलिंग हैं।
  • Item A1 और Item A2, Group A से संबंधित हैं।
  • दोनों क्रमांकित निर्देश केवल Item A2 से संबंधित हैं।
  • Item B1 और Item B2, Group B से संबंधित हैं।

इन संबंधों को डिस्प्ले के साथ-साथ स्रोत कोड में भी जाँचें। उदाहरण के स्पष्ट टैग और सूची-पैरेंट संबंधों की प्रोग्रामेटिक जाँच की गई थी; यहाँ Safari में उसका रूप जाँचा नहीं गया।

गलत आइटम से जुड़ी उपसूची की समस्या पहचानें

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

1. ऐसे पैरेंट आइटम को ढूँढ़ें जो बहुत जल्दी बंद हो जाता है

यह गलत अंश उपसूची शुरू होने से पहले ही Group A को बंद कर देता है:

<ul>
  <li>Group A</li>
  <ul>
    <li>Item A1</li>
  </ul>
</ul>

यहाँ भीतरी <ul> बाहरी <ul> का सीधा चाइल्ड है। Group A के </li> को भीतरी </ul> के नीचे ले जाएँ, ताकि पैरेंट उपसूची को अपने भीतर रखे। यह सुधार Google के नेस्ट की गई सूची के उदाहरण में दिखाए गए स्थान-नियम का पालन करता है।

2. सही संरचना में गलत पैरेंट की जाँच करें

कोई सूची नेस्टिंग के नियमों का पालन करते हुए भी गलत संबंध बता सकती है। उदाहरण के लिए, क्रमांकित निर्देशों को Item A1 के भीतर रखने से वे Item A1 से जुड़ जाएँगे, भले ही अपेक्षित लेबल Item A2 हो। केवल सही सिंटैक्स से आपका इच्छित समूह तय नहीं होता।

हर उपसूची के लिए पूछें: “किस आइटम का ओपनिंग टैग इस पूरी सूची को अपने भीतर रखता है?” उस आइटम के लेबल की तुलना अपेक्षित पैरेंट से करें। पूरे उदाहरण में, क्रमांकित निर्देशों से बाहर की ओर टैगों का पता लगाने पर पहले Item A2 और फिर Group A तक पहुँचना चाहिए। अगर आप किसी दूसरे लेबल तक पहुँचते हैं, तो उसका रूप बदलने से पहले पूरी उपसूची को सही जगह ले जाएँ।

3. संपादन करते समय क्लोज़िंग टैग स्पष्ट रखें

कुछ खास स्थितियों में, जैसे कि जब उसके तुरंत बाद दूसरा आइटम आता है, HTML में किसी आइटम का क्लोज़िंग </li> टैग छोड़ा जा सकता है। आपको इस संक्षिप्त रूप पर निर्भर रहने की ज़रूरत नहीं है। नेस्टिंग सीखते या सुधारते समय हर क्लोज़िंग आइटम टैग लिखें, ताकि हर सीमा स्पष्ट दिखे। Mozilla अपने सूची-आइटम के तकनीकी सारांश में टैग छोड़ने की सटीक शर्तें देता है।

संपादन में मदद के लिए इंडेंटेशन एक जैसा रखें: चाइल्ड सूची को उसके पैरेंट लेबल के नीचे इंडेंट करें और मेल खाते ओपनिंग तथा क्लोज़िंग सूची टैगों को एक सीध में रखें। फिर टैग की वास्तविक सीमाएँ जाँचें। इंडेंटेशन से इच्छित संबंध पढ़ना आसान होता है; उसे स्थापित करने का काम एनक्लोज़िंग तत्व करते हैं।

4. पैराग्राफ़ रैपर को उनकी अपनी सीमाओं में रखें

अगर पैरेंट लेबल के लिए पैराग्राफ़ चाहिए, तो उपसूची खोलने से पहले वह पैराग्राफ़ बंद करें और दोनों को पैरेंट आइटम के भीतर रखें। HTML Standard के अनुसार सूची कंटेनर, <p> तत्वों के चाइल्ड नहीं हो सकते। HTML पैराग्राफ़ के कंटेंट नियम

यह सही अंश लेबल पैराग्राफ़ और चाइल्ड सूची को Group A के भीतर साथ रखता है:

<ul>
  <li>
    <p>Group A</p>
    <ul>
      <li>Item A1</li>
    </ul>
  </li>
</ul>

स्रोत को दोबारा खोलें और बदलाव करते समय पदानुक्रम बनाए रखें

अगर TextEdit में फ़ाइल दोबारा खोलने पर टैग की जगह फ़ॉर्मैट किया हुआ कंटेंट दिखे, तो File > Open चुनें, फ़ाइल चुनें, Show Options पर क्लिक करें, Ignore rich text commands चुनें और Open पर क्लिक करें। भविष्य में बनाई जाने वाली फ़ाइलों के लिए Apple TextEdit > Settings > Open and Save में Display HTML files as HTML code instead of formatted text विकल्प भी देता है। TextEdit में HTML कोड के रूप में देखें

किसी आइटम को ले जाते समय उसका पूरा <li> ब्लॉक ले जाएँ, जिसमें उसमें मौजूद उपसूचियाँ भी शामिल हों। उदाहरण के लिए, Item A2 को ले जाने पर उसके दोनों निर्देश भी साथ ले जाने होंगे। केवल लेबल ले जाने से वे निर्देश पीछे छूट जाएँगे और दस्तावेज़ का इच्छित समूह बदल जाएगा।

संशोधित फ़ाइल सेव करने से पहले तीन बातें जाँचें: हर चाइल्ड सूची इच्छित पैरेंट आइटम के भीतर हो; सिबलिंग आइटम आवश्यक क्रम में रहें; और हर सूची में बुलेट या नंबर का चयन इस आधार पर हो कि उसका क्रम मायने रखता है या नहीं। फ़ाइल सेव करें, उसे Safari में दोबारा खोलें और दिख रहे समूहों की तुलना अपने इच्छित आउटलाइन से करें। हर पैरेंट और उसके पूरे सबट्री को साथ रखने से भविष्य के संपादनों की जाँच आसान हो जाती है।

स्रोत