HTML(एचटीएमएल) पेज में किसी भी जानकारी के विविरण में अगर कोई सूची डालनी हो तो हम लिस्ट टैग्स का इस्तेमाल कर सकते है।
लिस्ट टैग्स को HTML पेज में ऐड करने से कोई भी महत्वपूर्ण सूची यूजर के ध्यान में आती है और अलग से स्टाइलिश दिखती है।
HTML में सूची को दिखा ने के लिए हम 3 प्रकार के टैग्स का इस्तेमाल कर सकते है,
- Unordered List
- Ordered List
- Description List
- List Item
ऊपर दिए गए टैग्स के मिश्रण से सूची दिखा सकते है।
Unordered List
जब कोई एसी सूची दिखानी हो जिसमे क्रमांक(Index) का कोई महत्व ना हो, तो उसमे <ul> टैग का इस्तेमाल कर सकते है, इस टैग की लिस्ट की आइटम बुलेट पॉइंट(“•”) में दिखती है।
ऊदाहरण:
<ul> <li>पहला आइटम</li> <li>दूसरा आइटम</li> <li>तीसरा आइटम</li> </ul>
Ordered List
जब कोई एसी सूची दिखानी हो जिसमे क्रमांक(Index) का कोई महत्व हो, तो उसमे <ol> टैग का इस्तेमाल कर सकते है, इस टैग मे दी गई लिस्ट आइटम (1., 2., 3., ) जैसे कर्मांक(Index) में दिखती है।
ऊदाहरण:
<ol> <li>पहला आइटम</li> <li>दूसरा आइटम</li> <li>तीसरा आइटम</li> </ol>
Description List
जब हमे कोई इस प्रकार की सूची html पेज ऐड करनी हो जिसमे जानकारी भी तो लिस्ट को जानकारी से संबंधित दिखाने के लिए हम डिस्क्रिप्शन टैग का इस्तेमाल कर सकते है।
ये टैग ordered list और unordered list से थोड़ा अलग है और बहुत कम इस्तेमाल होता है, लेकिन बहुत जरूर टैग है।
इस लिस्ट को हम कुल 3 टैग्स के इस्तेमाल से बना सकते,
- <dl>
- <dt>
- <dd>
Description List (<dl>) टैग
<dl> टैग एक कन्टैनर टैग है जिसके अंदर <dt> और <dd> टैग्स इस्तेमाल होते है।
Description Title <dt> टैग
<dt> टैग लिस्ट का शीर्षक दिखाने के लिए इस्तेमाल होता है।
Description Data (dd) टैग
<dd> टैग में हम लिस्ट की आइटम के बारें में जानकारी डाल सकते है, अगर हम <dl> टैग में इस टैग को इस्तेमाल नहीं करते तो हम डिस्क्रिप्शन टैग सही से इस्तेमाल नहीं कर सकते।
ऊदहरण:
<dl> <dt>HTML</dt> <dd>एचटीएमएल वेब पेज का संरचनात्मक भाग होता है।</dd> <dt>CSS</dt> <dd>सीएसएस वेब पेजों को स्टाइल डाल कर सुंदर बनाने के लिए इस्तेमाल होता है।</dd> <dt>JavaScript</dt> <dd>जावास्क्रिप्ट वेब पेजों में लॉजिक डाल कर डाइनैमिक काम करने के लिए इस्तेमाल किया जाता है।</dd> </dl>
List Item
Ordered List या Unordered List में सूची का कंटेन्ट दिखाने के लिए <li> टैग का इस्तेमाल होता है।
<li> टैग हमेशा उसके पेरन्ट टैग(<ol> या <li>) के अंदर ही होता है, और उसकी स्टाइल भी पेरन्ट टैग से ज्यादा प्रभावित होती है।
लिस्ट टैग के उदाहरण हमने ऊपर देखे है।
Download PDF of list tags in hindi
बोनस टिप: ईस तरह लिस्ट टैग्स का इस्तेमाल करने से वेबपेज सर्च इंजन जैसे बोट्स को कंटेन्ट में दिया गई महत्वपूर्ण ध्यान में आती है, जिससे SEO में मदद मिलती है।
लिस्ट टैग्स HTML के ग्लोबल ऐट्रिब्यूट सपोर्ट करता है।
और ज्यादा एचटीएमएल(HTML) टैग्स के बारे में जानने के लिए नीचे दिया गया ब्लॉग जरूर पढ़े,