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




html-lists nested-lists (5)

क्या आपने नेस्टिंग सूचियों के लिए "उल" के बजाय 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>

डब्ल्यू 3 डॉक्स में एक नेस्टेड सूची उदाहरण है जिसे DEPRECATED EXAMPLE: द्वारा पूर्वनिर्धारित किया DEPRECATED EXAMPLE: लेकिन उन्होंने इसे गैर-बहिष्कृत उदाहरण के साथ कभी भी सही नहीं किया, न ही उदाहरण के साथ क्या गलत है समझाया।

तो एचटीएमएल सूची लिखने का सही तरीका कौन सा तरीका है?

विकल्प 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>

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


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

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

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

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



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

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

सूची में डब्ल्यू 3 सी विकी से लिंक (नीचे टिप्पणी से लिया गया): एचटीएमएल लिस्ट विकी

एचटीएमएल 5 डब्ल्यू 3 सी ul स्पेक से लिंक: एचटीएमएल 5 ul । ध्यान दें कि एक ul तत्व में शून्य या अधिक li तत्व हो सकते हैं। यह एचटीएमएल 5 ol पर लागू होता है। विवरण सूची ( एचटीएमएल 5 dl ) समान है, लेकिन दोनों dt और dd तत्वों की अनुमति देता है।

अधिक नोट्स:

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






nested-lists