लिस्ट्स (Lists)
आज हम lists देखते हैं — ul जहाँ क्रम मायने नहीं रखता, ol जहाँ स्टेप्स का क्रम ज़रूरी है, और हर आइटम के लिए li।
- 1
List क्या होती है
पिछले लेसन में
<video>से क्लिप चलाया। आज पेज पर मिलती-जुलती चीज़ों को ग्रुप करते हैं। सामग्री की shopping bag एक तरह की list है। स्टेप एक, दो, तीन वाली recipe दूसरी।HTML में हर आइटम
<li>है। Parent तय करता है list किस तरह की है: unordered bullets के लिए<ul>, ordered numbers के लिए<ol>। - 2
समस्या: जब सूची में क्रम का महत्व हो और बुलेट्स पर्याप्त न हों
सादे paragraphs यह नहीं कहते कि “ये लाइनें एक list के रूप में साथ हैं”। लोगों को items के ग्रुप का साफ़ संकेत चाहिए था, और दूसरा संकेत जब उन items का क्रम मायने रखे।
इसलिए HTML रैंक न हो तो
<ul>देता है, और क्रम ही बात हो तो<ol>। दोनों<li>children लपेटते हैं। आज list के अंदर list नहीं डालते। - 3
Browser काउंटर्स और बुलेट मार्कर्स की गणना कैसे करता है
Browser
<ul>या<ol>खोलता है, फिर हर<li>को bullet या नंबर के साथ खींचता है।<li>list parent के अंदर ही रहता है, अकेले body में नहीं।नीचे उदाहरण में tiffin bag एक
<ul>है। Chai के स्टेप्स एक<ol>हैं। Chai के स्टेप्स बदलो तो पेय बदल जाता है। Tiffin items बदलो तो lunch फिर भी lunch है। - 4
आज की प्रैक्टिस: बिना क्रम की सामग्री बनाम क्रमबद्ध चरण
नीचे दोनों छोटी lists पढ़ो, फिर browser pane देखो। एक में bullets हैं। दूसरी में नंबर।
- 5
अहम नियम: उपयोग तय करता है पेरेंट टैग (ul बनाम ol)
सामग्री, tags, या nav links के लिए
<ul>। Recipes, rankings, या निर्देशों के लिए<ol>। हर आइटम अपनी<li>में रखो।
गोल बुलेट पॉइंट्स दिखाता है। जब क्रम का कोई फर्क न पड़े (जैसे किराने का सामान, टैग्स या नेविगेशन मेन्यू)।
क्रमबद्ध संख्याएं (1, 2, 3...) दिखाता है। जब क्रम अनिवार्य हो (जैसे रेसिपी के स्टेप्स, लीडरबोर्ड, या इंस्टॉलेशन निर्देश)।
आप क्या सीखेंगे
- 1Lists मिलती-जुलती चीज़ों को ग्रुप करती हैं
- 2ul unordered bullets के लिए है
- 3ol ordered steps के लिए है
- 4li list के अंदर एक आइटम है
- 5li को ul या ol के अंदर ही रखना है
लाइन-बाय-लाइन
<ul> ... </ul>Unordered list। Browser bullets खींचता है। जब क्रम अर्थ न बदले तब इस्तेमाल करो।
<ol> ... </ol>Ordered list। Browser नंबर खींचता है। जब स्टेप एक के बाद दो ज़रूरी हो तब इस्तेमाल करो।
<li>Roti</li>एक list item। हर
<li><ul>या<ol>के अंदर बैठती है, अकेले body में नहीं।
खुद ट्राई करो
सुबह की routine तीन स्टेप्स की <ol> में लिखो। फिर फोन के तीन ऐप्स <ul> में। दोनों lists सपाट रखो — list के अंदर list नहीं।
हिंट: हर आइटम को parent list tag के अंदर अपनी <li> चाहिए।
गलती कहाँ होती है
- 1.
<ul>या<ol>के बाहर<li>। List items सिर्फ़ list parent के अंदर रहती हैं। - 2.जहाँ क्रम मायने न रखे वहाँ links की थैली के लिए
<ol>। वहाँ<ul>बेहतर है।
इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)
Q: <ul> और <ol> का चयन कब करना चाहिए?↓
जब सूची में मदों के क्रम (Order) का कोई महत्व न हो (जैसे सामग्री, नेविगेशन मेन्यू, फीचर्स), तब <ul> का प्रयोग करें। जब क्रम अनिवार्य हो (जैसे रेसिपी के निर्देश, रैंकिंग, चेकआउट के चरण), तब <ol> का प्रयोग करें।
Q: क्या <li> टैग को सीधे body या div में लिखा जा सकता है?↓
नहीं। HTML विनिर्देशों के अनुसार <li> हमेशा किसी लिस्ट कंटेनर (जैसे <ul> या <ol>) का प्रत्यक्ष चाइल्ड ही होना चाहिए। ऐसा न करने से स्क्रीन रीडर्स का नेविगेशन टूट जाता है।
Q: HTML में सब-लिस्ट (Nested List) बनाने का सही तरीका क्या है?↓
अंदरूनी लिस्ट हमेशा किसी <li> एलिमेंट के भीतर रखी जानी चाहिए, दो <li> के बीच में नहीं। उदाहरण: <li>मुख्य विषय <ul><li>उप-विषय</li></ul></li>।