HTML सूची जनरेटर

पंक्तियों की सूची से असली मार्कअप तक

वेब पर सूचियाँ हर जगह हैं: नेविगेशन मेन्यू, फ़ीचर बुलेट, क़दम-दर-क़दम निर्देश, सामग्री की सूचियाँ, और विषय-सूचियाँ। इनके लिए हाथ से टैग टाइप करना उबाऊ और भूल-भरा है, क्योंकि हर आइटम को एक अकेले ul या ol रैपर के भीतर नेस्ट किए अपने ही li एलिमेंट की ज़रूरत होती है, और किसी लंबी सूची के बीच में आधे रास्ते कोई क्लोज़िंग टैग भूल जाना आसान है। यह जनरेटर वह घर्षण हटा देता है: आप एक पंक्ति पर एक आइटम पेस्ट करते हैं और यह आपके लिए पूरी, सही ढंग से नेस्ट की गई संरचना बना देता है।

मानसिक मॉडल यह है कि एक पंक्ति बराबर एक सूची आइटम। किसी पंक्ति पर आप जो भी टाइप करते हैं वह एक li का टेक्स्ट बन जाता है, और टूल पूरे समूह को आपके चुने हुए कंटेनर एलिमेंट में लपेट देता है। अपनी पंक्तियों को फिर से क्रमबद्ध करें या संपादित करें और फिर से जनरेट करें, और मार्कअप तुरंत साथ चल देता है।

Ordered बनाम unordered: सही एलिमेंट चुनना

ul और ol के बीच का चुनाव दिखावटी नहीं, सिमैंटिक है। एक unordered सूची (ul) बुलेटों के साथ रेंडर होती है और यह संकेत देती है कि आइटमों का क्रम मायने नहीं रखता, जैसे उत्पाद की विशेषताओं का एक समूह। एक ordered सूची (ol) संख्याओं के साथ रेंडर होती है और यह संकेत देती है कि क्रम सार्थक है, जैसे किसी रेसिपी के क़दम या कोई रैंक की हुई सूची। स्क्रीन रीडर इन्हें अलग-अलग बोलते हैं, इसलिए सही वाली चुनना सिर्फ़ एक दृश्य नहीं, बल्कि एक सुगम्यता का फ़ैसला है।

एक काम की कसौटी: अगर आप आइटमों को अर्थ बदले बिना फेंट सकते हैं, तो unordered सूची इस्तेमाल करें; अगर उन्हें फेंटने से सामग्री ग़लत हो जाए, तो ordered सूची इस्तेमाल करें। जब भी क्रम, रैंकिंग, या क्रमांकित संदर्भ कोई जानकारी ढोते हों, ol की ओर हाथ बढ़ाएँ।

एक हल किया हुआ उदाहरण

तीन पंक्तियाँ टाइप करें, Apple, Banana और Cherry, Unordered List चुनें, और टूल तीन li एलिमेंटों वाला एक ul एलिमेंट बनाता है, हर फल के लिए एक, सही ढंग से इंडेंट और बंद किया हुआ। Ordered List पर जाएँ और वही तीन पंक्तियाँ एक ol बन जाती हैं, जिसे ब्राउज़र 1. Apple, 2. Banana, 3. Cherry के रूप में रेंडर करता है। कोई टैग कभी खुला नहीं छोड़ा जाता, और इंडेंटेशन संरचना को पढ़ने और बनाए रखने में आसान बना देता है।

क्रमांकित सूचियाँ जो आपकी मनचाही जगह से शुरू हों

Ordered सूचियों को 1 से शुरू होना ज़रूरी नहीं। Advanced Options में Start Number फ़ील्ड का इस्तेमाल ol पर एक start एट्रिब्यूट लिख देता है, इसलिए आप किसी ऐसे क्रमांकित अनुक्रम को जारी रख सकते हैं जो दूसरी सामग्री से बीच में टूट गया हो, या वहीं से उठा सकते हैं जहाँ कोई पिछली सूची छूटी थी। उदाहरण के लिए, start को 5 पर सेट करना पहले आइटम को 5 के रूप में, अगले को 6 के रूप में, और इसी तरह रेंडर करता है। संख्याओं को आइटम के टेक्स्ट में टाइप करके नक़ली बनाने के बजाय, क्रमांकन को नियंत्रित करने का यह साफ़, मानक-आधारित तरीक़ा है, जो सूची को कभी फिर से क्रमबद्ध करने की ज़रूरत पड़ने पर टूट जाता।

स्टाइलिंग के लिए ID और क्लास जोड़ना

Advanced Options आपको CSS और JavaScript के लिए तीन हुक देते हैं। एक List ID ul या ol पर एक अनोखा id लगा देता है, जो किसी ऐसे एक-बारगी एलिमेंट के लिए आदर्श है जिसे आप सटीक रूप से निशाना बनाना या किसी ऐंकर से लिंक करना चाहते हों। एक List Class कंटेनर पर एक क्लास लगा देता है ताकि वह साझा स्टाइल विरासत में पाए, जैसे कोई क्षैतिज नेविगेशन लेआउट या कोई कस्टम बुलेट डिज़ाइन। एक Item Class हर li पर एक क्लास लगा देता है, जो तब बढ़िया है जब हर आइटम को एक ही व्यवहार चाहिए, जैसे एक-समान अंतर या कोई आइकन।

चूँकि क्लास और ID सीधे जनित टैगों में उतर जाते हैं, मार्कअप पेस्ट करते ही किसी मौजूदा स्टाइलशीट से मेल खाने को तैयार होता है, बाद में किसी खोजें-और-बदलें के बिना।

ख़ाली पंक्तियाँ क्यों अनदेखी की जाती हैं

अगर आप ग़लती से आइटमों के बीच कोई ख़ाली पंक्ति छोड़ देते हैं, या आपके पेस्ट किए स्रोत में अंत में ख़ाली पंक्तियाँ हैं, तो जनरेटर एक ख़ाली li बनाने के बजाय उन्हें छोड़ देता है। यह जानबूझकर है: आवारा ख़ाली सूची आइटम ख़ाली बुलेट या छूटी संख्याओं के रूप में रेंडर होकर पेज को अव्यवस्थित कर देते। नियम यह है कि सिर्फ़ असल, ग़ैर-व्हाइटस्पेस सामग्री वाली पंक्तियाँ ही सूची आइटम बनती हैं, इसलिए आप ढीले-ढाले फ़ॉर्मेट किए टेक्स्ट को पहले साफ़ किए बिना पेस्ट कर सकते हैं।

SEO और सुगम्यता के लिए सिमैंटिक सूचियाँ क्यों मायने रखती हैं

डैश या लाइन ब्रेक से अलग किए अनुच्छेदों के बजाय असली सूची मार्कअप का इस्तेमाल करना दिखावट से परे फ़ायदा देता है। सर्च इंजन समूहित सामग्री को समझने के लिए ul और ol संरचनाओं को पार्स करते हैं, और सही सूचियाँ क़दमों और how-to सामग्री के रिच रिज़ल्ट जैसी विशेषताओं में दिखने की पात्र होती हैं। सहायक तकनीक को भी फ़ायदा होता है: एक स्क्रीन रीडर बता देता है कि किसी सूची में कितने आइटम हैं और उपयोगकर्ताओं को आइटम-दर-आइटम नेविगेट करने देता है, जो तब नामुमकिन है जब बुलेट टेक्स्ट कैरेक्टरों से नक़ली बनाए गए हों।

संक्षेप में, सिमैंटिक सूचियाँ संरचना को इंसानों के साथ-साथ मशीनों तक भी संप्रेषित करती हैं। सही ul या ol मार्कअप जनरेट करने में एक पल लगाना आपकी सामग्री को किसी हाथ से फ़ॉर्मेट की गई नक़ल की तुलना में ज़्यादा सुगम्य, ज़्यादा क्रॉल करने योग्य, और बनाए रखने में आसान बना देता है।