HTML नेस्टेड सूची बनाने का उचित तरीका?

Question

W3 डॉक्स के पास पहले से उपसर्ग के रूप में एक नेस्टेड सूची उदाहरण है DEPRECATED EXAMPLE:, लेकिन उन्होंने इसे कभी भी न हटाए गए उदाहरण के साथ ठीक नहीं किया, और न ही समझाया कि उदाहरण के साथ क्या गलत है।

तो इनमें से कौन सा तरीका HTML लिस्ट लिखने का सही तरीका है?

विकल्प 1 : नेस्टेड <ul>माता-पिता का एक बच्चा है<ul>

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

विकल्प 2 : नेस्टेड इसमें <ul>से एक बच्चा <li>है

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>

Answer 1

विकल्प 2 सही है।

नेस्टेड सूची उस सूची के एक <li>तत्व के अंदर होनी चाहिए जिसमें यह नेस्टेड है।

W3C Wiki को सूचियों से लिंक करें (नीचे टिप्पणी से लिया गया): HTML सूचियाँ विकी ।

HTML5 W3C ulकल्पना से लिंक करें : HTML5ul । ध्यान दें कि एक ulतत्व में बिल्कुल शून्य या अधिक तत्व हो सकते हैं li। यह HTML5ol पर लागू होता है । विवरण सूची ( HTML5dl ) समान है, लेकिन दोनों तत्वों dtऔर ddतत्वों की अनुमति देता है ।

अधिक नोट्स:

• dl = परिभाषा सूची।
• ol = सूची (संख्या) का आदेश दिया।
• ul = अनियंत्रित सूची (गोलियां)।

Comments

यहां आधिकारिक W3C जानकारी, w3.org/wiki/HTML_lists#Nesting_lists , विकल्प 2 सही तरीका है

— जोस एलेरा

मैं एक ऐसे मामले में भाग गया, जो मान्य HTML5 के साथ बनाना असंभव प्रतीत होता है: एक मूल सूची आइटम के बिना एक नेस्टेड सूची आइटम (किसी वर्ड प्रोसेसर में सूची आइटम की शुरुआत में इंडेंट करने के लिए TAB को दबाएं)। मेरा सवाल यहाँ देखें: stackoverflow.com/questions/61094384/…

— मार्क

Answer 2

विकल्प 2

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

घोंसले के शिकार सूची - उल

Answer 3

विकल्प 2 सही है: नेस्टेड <ul>यह का एक बच्चा <li>है जिसमें शामिल है।

यदि आप मान्य करते हैं , तो विकल्प 1 HTML 5 में एक त्रुटि के रूप में आता है - क्रेडिट: user3272456

---

सही बात: <ul> बच्चे के रूप में<li>

HTML नेस्टेड सूची बनाने का उचित तरीका नेस्टेड के <ul>साथ एक बच्चे के रूप में <li>है जिसमें से यह है। नेस्टेड सूची <li>उस सूची के तत्व के अंदर होनी चाहिए जिसमें यह नेस्टेड है।

<ul>
    <li>Parent/Item
        <ul>
            <li>Child/Subitem
            </li>
        </ul>
    </li>
</ul>

---

W3C नेस्टिंग सूची के लिए मानक

एक सूची आइटम में एक और पूरी सूची हो सकती है - इसे "नेस्टिंग" सूची के रूप में जाना जाता है। यह सामग्री की तालिका जैसी चीजों के लिए उपयोगी है, जैसे कि इस लेख की शुरुआत में:

1. अध्याय एक
   1. खण्ड एक
   2. खंड दो
   3. धारा तीन
2. अध्याय दो
3. अध्याय तीन

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

<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

ध्यान दें कि कैसे नेस्टेड सूची <li>और सूची आइटम ("अध्याय एक") के पाठ के बाद शुरू होता है ; फिर </li>सूची वाले आइटम से पहले समाप्त होता है । नेस्टेड सूचियां अक्सर वेबसाइट नेविगेशन मेनू का आधार बनती हैं, क्योंकि वे वेबसाइट की पदानुक्रमित संरचना को परिभाषित करने का एक अच्छा तरीका हैं।

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

Answer 4

यदि आप सत्यापन करते हैं, तो विकल्प 1 HTML 5 में त्रुटि के रूप में आता है, इसलिए विकल्प 2 सही है।

Answer 5

मैं विकल्प दो पसंद करता हूं क्योंकि यह सूची आइटम को उस नेस्टेड सूची के स्वामी के रूप में स्पष्ट रूप से दिखाता है। मैं हमेशा शब्दार्थ ध्वनि एचटीएमएल की ओर झुकूंगा।

Answer 6

क्या आपने नेस्टिंग सूचियों के लिए "उल" के बजाय TAG "dt" का उपयोग करने के बारे में सोचा है? यह विरासत शैली और संरचना आपको प्रति अनुभाग एक शीर्षक रखने की अनुमति देता है और यह स्वचालित रूप से उस सामग्री को सारणीबद्ध करता है जो अंदर जाती है।

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

वी.एस.

<ul>
   <li>Choice A</li>
   <li>Choice B
      <ul>
         <li>Sub 1</li>
         <li>Sub 2</li>
      </ul>
   </li>
</ul>

Comments

आपके उदाहरण समान नहीं हैं। "चॉइस ए", "च्वाइस बी", "सब 1", "सब 2" के साथ दूसरा उदाहरण उन dt/ ddटैग्स के लिए काम नहीं करता है जो जोड़े जाते हैं। इसके अलावा अंतर्निहित शैली (और सारणीकरण, मुझे संदेह है) केवल डिफ़ॉल्ट ब्राउज़र स्टाइलशीट से आता है, इसलिए यह बहुत कुछ नहीं कह रहा है। मैं इसे अर्थ तत्व की तरह मानूंगा; यदि आपके पास परिभाषाओं की एक सूची है, या शायद यदि आपके पास केवल शीर्षक / विवरण डेटा के जोड़े हैं, dlतो एक अच्छा विकल्प हो सकता है।

— Ricket

क्या आप समकक्ष उदाहरण देने के लिए अपनी टिप्पणी को संपादित कर सकते हैं - जैसे कि विकल्प A और चॉइस B दोनों को दो उप प्रविष्टियों के साथ Sub 1 और Sub 2 चॉइस B के लिए?

— ज़्लातिन ज़्लाटेव

Answer 7

यहां जो उल्लेख नहीं किया गया है वह विकल्प 1 आपको सूचियों के मनमाने ढंग से गहरे घोंसले के शिकार की अनुमति देता है।

यदि आप सामग्री / सीएसएस को नियंत्रित करते हैं, तो इससे कोई फर्क नहीं पड़ता, लेकिन यदि आप एक समृद्ध पाठ संपादक बना रहे हैं तो यह काम आता है।

उदाहरण के लिए, जीमेल, इनबॉक्स और एवरनोट सभी इस तरह सूची बनाने की अनुमति देते हैं:

विकल्प 2 के कारण आप ऐसा नहीं कर सकते (आपके पास एक अतिरिक्त सूची आइटम होगा), विकल्प 1 के साथ, आप कर सकते हैं।

Comments

विकल्प 1 अवैध HTML पैदा करता है। पांच साल पहले जब यह सवाल पूछा गया था कि मामला नहीं रहा है, लेकिन अब ऐसा हो सकता है।

— j08691

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

— इबैश

मुझे यकीन नहीं है कि मैं समझ पा रहा हूं कि मैं इसके बारे में कुछ गलत क्यों बोलूंगा। क्या आप इसके लिए अधिक सार्थक उपयोग देने के लिए अपनी टिप्पणी संपादित कर सकते हैं?

— ज़्लातिन ज़्लाटेव

महत्वपूर्ण रूप से यह गोलियों के एक समूह के लिए मुफ्त फ़ॉर्म संपादन की अनुमति देता है, जिससे यह अधिक सहज महसूस होता है। एक उपयोगकर्ता के रूप में, अगर मेरे पास गोलियों की एक सूची है, तो मैं उन्हें इंडेंट करना चाहता हूं और एक नई बुलेट के तहत उन्हें घोंसला बना सकता हूं। मनमाने ढंग से इंडेंट करने की क्षमता के बिना उपयोगकर्ता को पहले हेडर बुलेट को सम्मिलित करना होगा और उसके बाद प्रत्येक बुलेट को इंडेंट करना होगा। मनमाने ढंग से इंडेंट करने की क्षमता के साथ, उपयोगकर्ता गोलियों के समूह को इंडेंट कर सकता है और फिर एक नया हेडर बुलेट डाल सकता है।

— 19