HTML लिस्ट टैग का उपयोग वेबपेज पर सूचियाँ बनाने के लिए किया जाता है। यह तीन प्रकार की सूचियाँ बना सकता है: क्रमबद्ध सूचियाँ, अक्रमबद्ध सूचियाँ, और विवरण सूचियाँ।
जब आप एक वेब पेज बना रहे होते हैं, तो आप जानकारी को एक सुव्यवस्थित सूची के रूप में प्रस्तुत करना चाह सकते हैं। उदाहरण के लिए, आपके पास छात्रों के नामों की सूची हो सकती है जिसे आप सूची रूप में दिखाना चाहते हैं, या ब्लॉग पोस्ट्स की एक श्रृंखला हो सकती है जिसे आप सूची के रूप में फॉर्मेट करना चाहते हैं।
HTML में, एक अंतर्निहित फंक्शन है जो आपको सूचियाँ बनाने की अनुमति देता है। इस ट्यूटोरियल में, हम HTML लिस्ट प्रकारों और उन्हें वेब पेज में कैसे लागू करें, इसे कवर करेंगे।
HTML लिस्ट प्रकार
HTML में तीन प्रकार की सूचियाँ हैं, और प्रत्येक का एक विशिष्ट उद्देश्य और कोड है। ये निम्नलिखित हैं:
क्रमबद्ध सूची (Ordered list): किसी विशेष क्रम में आइटम्स की सूची बनाने के लिए उपयोग किया जाता है।अक्रमबद्ध सूची (Unordered list): बिना किसी क्रम के आइटम्स की सूची बनाने के लिए उपयोग किया जाता है।विवरण सूची (Description list): आइटम्स और उनके विवरण की सूची बनाने के लिए उपयोग किया जाता है।
सूचियाँ वेबपेज के किसी भी भाग में दिखाई दे सकती हैं, चाहे आप उन्हें टेक्स्ट के अंदर रखें, लाइन ब्रेक के बाद, या यहां तक कि किसी अन्य सूची के अंदर नेस्टेड लिस्ट बनाने के लिए। आइए जानते हैं कि आप HTML में इन तीन प्रकार की सूचियाँ कैसे बना सकते हैं।
HTML लिस्ट्स: क्रमबद्ध (Ordered)
क्रमबद्ध सूचियाँ HTML में तब उपयोग की जाती हैं जब सूची का क्रम आवश्यक हो। उदाहरण के लिए, यदि आपके पास निर्देशों की एक श्रृंखला है जो किसी विशेष क्रम में होनी चाहिए, तो आप क्रमबद्ध सूची का उपयोग करना चाहेंगे। क्रमबद्ध सूचियाँ संख्यांकित सूचियाँ होती हैं।
क्रमबद्ध सूचियाँ <ol> टैग का उपयोग करती हैं, और सूची में प्रत्येक आइटम <li> टैग का उपयोग करता है। यहां क्रमबद्ध सूची का एक उदाहरण है:
<ol> <li>एक कटोरे में 100g मैदा, 2 अंडे, 300ml दूध, और 1 बड़ा चम्मच सूरजमुखी तेल मिलाएं।</li> <li>मिश्रण को 30 मिनट के लिए आराम करने दें।</li> <li>मध्यम आकार की फ्राइंग पैन को मध्यम आंच पर रखें और तेल लगे किचन पेपर से पोंछें।</li> <li>बैटर मिश्रण को पैन में डालें और प्रत्येक तरफ एक मिनट तक पकाएं।</li> </ol>
उपरोक्त उदाहरण में, हमने पैनकेक के लिए एक बुनियादी रेसिपी बनाई है। इस सूची में प्रत्येक चरण को क्रम में होना चाहिए, इसलिए हमने क्रमबद्ध सूची चुनी। हमारे कोड का आउटपुट यहां है:
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद वे अपनी टेक जॉब संभावनाओं के बारे में अधिक आश्वस्त महसूस करते हैं। आज ही बूटकैंप से जुड़ें।
औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी पाने तक।
क्रमबद्ध सूचियाँ संख्या एक से शुरू होती हैं और आरोही क्रम में जाती हैं। हालांकि, यदि आप अपनी सूची को किसी अन्य संख्या से शुरू करना चाहते हैं, तो आप start विशेषता का उपयोग कर सकते हैं जैसे:
<ol start="5"> <li>पैनकेक को प्लेट में रखें (यदि आप कई पैनकेक बना रहे हैं तो चरण 2-4 दोहराएं)।</li> <li>अपने पैनकेक पर मक्खन, मेपल सिरप, नींबू, या कोई अन्य टॉपिंग लगाएं।</li> <li>अपने पैनकेक का आनंद लें!</li> </ol>
हमारी नई सूची इस प्रकार दिखाई देती है:
HTML लिस्ट्स: अक्रमबद्ध (Unordered)
यदि आप आइटम्स की एक सूची बनाना चाहते हैं जहां सूची के आइटम्स का क्रम महत्वपूर्ण नहीं है, तो आप HTML अक्रमबद्ध लिस्ट टैग का उपयोग कर सकते हैं। हम <ul> टैग का उपयोग करके अक्रमबद्ध सूचियाँ बना सकते हैं, और प्रत्येक सूची आइटम, हमारी क्रमबद्ध सूची की तरह, <li> टैग से शुरू होता है।
यहां अक्रमबद्ध सूची का एक उदाहरण है:
<ul> <li>एलेक्स</li> <li>कैरोल</li> <li>लूसी</li> <li>शॉन</li> </ul>
हमारी सूची इस प्रकार दिखाई देती है:
HTML लिस्ट्स: विवरण सूचियाँ (Description Lists)
जब आप एक सूची लिख रहे होते हैं, तो आप अपनी सूची के प्रत्येक आइटम का विवरण शामिल करना चाह सकते हैं। उदाहरण के लिए, यदि आपके पास छात्रों के नामों की सूची है, तो आप उनके ग्रेड जोड़ना चाह सकते हैं, लेकिन मुख्य सूची टेक्स्ट के भाग के रूप में नहीं।
यहीं विवरण सूचियाँ काम आती हैं। विवरण सूचियाँ विवरण के साथ आइटम्स की सूचियाँ होती हैं। विवरण सूचियाँ <dl> टैग का उपयोग करके बनाई जाती हैं, सूची में मुख्य एलिमेंट्स <dt> टैग का उपयोग करते हैं, और परिभाषाएँ <dd> टैग का उपयोग करती हैं।
यहां HTML में विवरण सूची का एक उदाहरण है:
<dl> <dt>इकोनॉमी क्लास</dt> <dd>मानक सीटें, कोई भोजन सेवा नहीं।</dd> <dt>फर्स्ट क्लास</dt> <dd>लक्ज़री सीटें, कैटर की गई भोजन सेवा।</dd> </dl>
हमारा कोड निम्नलिखित सूची लौटाता है:
जैसा कि आप देख सकते हैं, हवाई जहाज की श्रेणी के नाम सूची प्रारूप में दिखाई देते हैं, और उन नामों के विवरण प्रत्येक आइटम के नीचे दिखाई देते हैं। प्रत्येक विवरण इंडेंटेड भी होता है, जो इसे सूची आइटम से अलग करता है।
निष्कर्ष
सूचियाँ HTML में एक आवश्यक टैग हैं, जो डेवलपर्स को जानकारी को सुव्यवस्थित तरीके से प्रस्तुत करने की अनुमति देती हैं। सूचियाँ आमतौर पर यूजर्स के लिए पढ़ने में अधिक आरामदायक होती हैं, और सूचियों का उपयोग करने से डेवलपर्स को सूचना संरचना पर अधिक नियंत्रण मिलता है।
इस ट्यूटोरियल में, हमने HTML में सूचियों को विस्तार से बताया है, और HTML सूचियों के तीनों प्रकारों को कैसे बनाएं: क्रमबद्ध (li ol टैग्स), अक्रमबद्ध (ul li टैग्स), और विवरण (dt dd टैग्स)। अब आप HTML में सूचियाँ बनाने के लिए एक प्रो की तरह तैयार हैं!
