HTML सूचियों का उपयोग कैसे करें (

,
,

)

HTML में 3 प्रकार के सूची तत्व होते हैं:

• अनियंत्रित सूचियां (सबसे आम)
• आदेशित सूचियां
• विवरण सूचियां

अनियंत्रित सूचियां

अनियंत्रित सूचियों को <ul> . के साथ परिभाषित किया गया है तत्व और प्रत्येक सूची आइटम के अंदर परिभाषित किया गया है <li> तत्व:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

परिणाम:

• ऐप्पल
• केला
• नारंगी

डिफ़ॉल्ट रूप से, अव्यवस्थित सूचियों को एक वृत्त बुलेट बिंदु के साथ स्टाइल किया जाता है, लेकिन इसे CSS के साथ अनुकूलित किया जा सकता है।

आदेशित सूचियां

आदेशित सूचियों को <ol> . के साथ परिभाषित किया गया है तत्व और प्रत्येक सूची आइटम के अंदर परिभाषित किया गया है <li> तत्व:

<ol>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ol>

परिणाम:

1. ऐप्पल
2. केला
3. नारंगी

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

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

विवरण सूचियाँ क्रमित और अव्यवस्थित सूचियों की तुलना में बहुत अलग तरीके से काम करती हैं।

यहां बताया गया है कि वे कैसे काम करते हैं:

• द <dl> तत्व विवरण सूची को परिभाषित करता है (और मूल तत्व है)।
• द <dt> तत्व विवरण सूची के अंदर शब्दों (नामों) को परिभाषित करता है (और <dl> का एक बच्चा है तत्व)।
• द <dd> तत्व विवरण सूची अवधि के लिए विवरण, परिभाषा या मूल्य प्रदान करता है (<dt> ) जो इसके ठीक पहले आया था (और <dl> . का एक बच्चा भी है तत्व)।

उदाहरण:

<dl>
  <dt>African Elephant</dt>
  <dd>The worlds largest living land animal.</dd>
  <dt>Giraffe</dt>
  <dd>The tallest living animal on Earth.</dd>
  <dt>Blue Whale</dt>
  <dd>The largest animal ever (as we know it).</dd>
</dl>

परिणाम:

अफ्रीकी हाथी

दुनिया का सबसे बड़ा जीवित भूमि जानवर।

जिराफ़

पृथ्वी पर सबसे ऊंचा जीवित प्राणी।

ब्लू व्हेल

अब तक का सबसे बड़ा जानवर (जैसा कि हम जानते हैं)।

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