HTML में 3 प्रकार के लिस्ट एलिमेंट्स होते हैं:
- अनऑर्डर्ड लिस्ट्स (सबसे आम)
- ऑर्डर्ड लिस्ट्स
- डिस्क्रिप्शन लिस्ट्स
अनऑर्डर्ड लिस्ट्स
अनऑर्डर्ड लिस्ट्स को <ul> एलिमेंट से परिभाषित किया जाता है और अंदर प्रत्येक लिस्ट आइटम को <li> एलिमेंट से परिभाषित किया जाता है:
<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>
परिणाम:
- Apple
- Banana
- Orange
डिफ़ॉल्ट रूप से, अनऑर्डर्ड लिस्ट्स को सर्कल बुलेट पॉइंट के साथ स्टाइल किया जाता है, लेकिन इसे CSS से कस्टमाइज़ किया जा सकता है।
ऑर्डर्ड लिस्ट्स
ऑर्डर्ड लिस्ट्स को <ol> एलिमेंट से परिभाषित किया जाता है और अंदर प्रत्येक लिस्ट आइटम को <li> एलिमेंट से परिभाषित किया जाता है:
<ol> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ol>
परिणाम:
- Apple
- Banana
- Orange
डिफ़ॉल्ट रूप से, ऑर्डर्ड लिस्ट्स न्यूमेरिकली प्रदर्शित होती हैं, लेकिन इसे CSS से कस्टमाइज़ किया जा सकता है।
डिस्क्रिप्शन लिस्ट्स
डिस्क्रिप्शन लिस्ट्स ऑर्डर्ड और अनऑर्डर्ड लिस्ट्स से काफी अलग तरीके से काम करती हैं।
यहां बताया गया है कि वे कैसे काम करती हैं:
<dl>एलिमेंट एक डिस्क्रिप्शन लिस्ट को परिभाषित करता है (और पैरेंट एलिमेंट है)।<dt>एलिमेंट एक डिस्क्रिप्शन लिस्ट के अंदर टर्म्स (नाम) को परिभाषित करता है (और<dl>एलिमेंट का चाइल्ड है)।<dd>एलिमेंट उस डिस्क्रिप्शन लिस्ट टर्म (<dt>) के लिए विवरण, परिभाषा, या मान प्रदान करता है जो ठीक उससे पहले आया था (और यह भी<dl>एलिमेंट का चाइल्ड है)।
उदाहरण:
<dl> <dt>African Elephant</dt> <dd>दुनिया का सबसे बड़ा जीवित भूमि जानवर।</dd> <dt>Giraffe</dt> <dd>पृथ्वी पर सबसे लंबा जीवित जानवर।</dd> <dt>Blue Whale</dt> <dd>अब तक का सबसे बड़ा जानवर (जितना हम जानते हैं)।</dd> </dl>
परिणाम:
- African Elephant
- दुनिया का सबसे बड़ा जीवित भूमि जानवर।
- Giraffe
- पृथ्वी पर सबसे लंबा जीवित जानवर।
- Blue Whale
- अब तक का सबसे बड़ा जानवर (जितना हम जानते हैं)।
डिस्क्रिप्शन लिस्ट्स आधुनिक HTML में शायद ही कभी उपयोग की जाती हैं। सबसे आम उपयोग का मामला जो मैंने देखा है वह किसी प्रकार की ग्लॉसरी बनाने या मेटाडेटा प्रदर्शित करने के लिए है — हालांकि, HTML में ऐसा करने के कई अन्य तरीके हैं।