लोड हो रहा है...

HTML सूचियाँ

सामग्री के मेनू, सुबह की दिनचर्या, फीचर बुलेट और पैकिंग चेकलिस्ट सूचियों के रूप में स्कैन करना आसान है। HTML दो रोजमर्रा संरचनाएँ देता है: अनऑर्डरड और ऑर्डरड सूचियाँ। plug-in सावधानी (इतिहास, कोई कोड सैंपल नहीं) के बाद यह सत्र उस हैंड्स-ऑन मार्कअप पर लौटता है जिसे आप लगभग हर कंटेंट पेज पर फिर इस्तेमाल करेंगे। सूचियों को समूहों और अनुक्रमों का अर्थ समझें — मल्टी-कॉलम layout का शॉर्टकट नहीं।

सूचियाँ किसके लिए हैं

सूची संबंधित आइटमों के समूह को समूह के रूप में चिह्नित करती है। ब्राउज़र और सहायक तकनीक बता सकती है कि कितने आइटम हैं और एक-एक करके चल सकती है। यह संरचना स्किमिंग, आउटलाइन और रेसिपी में मदद करती है। अर्थ गायब हो जाता है अगर आप सादे पैराग्राफ में यादृच्छिक डैश से बुलेट नकली बनाएँ, या सिर्फ विज़ुअल कॉलम में टेक्स्ट धकेलने के लिए ul खींचें। जब कंटेंट सच में सेट या अनुक्रम हो तब सूची मार्कअप चुनें। सजावटी स्पेसिंग और ग्रिड layout CSS के लिए बाद में रखें।

सीधा उत्तर

ul — अनऑर्डरड सूची (ब्राउज़र में डिफ़ॉल्ट बुलेट)
ol — ऑर्डरड सूची (डिफ़ॉल्ट नंबर)
li — प्रत्येक सूची आइटम
जब सब-आइटम चाहिए, दूसरे ul या ol को एक li के अंदर नेस्ट करें। li को पैरेंट सूची के बाहर न छोड़ें। क्लोज़िंग टैग ओपनिंग के उल्टे क्रम में नेस्ट होने चाहिए, खासकर जब एक स्टेप के नीचे सबलिस्ट जोड़ें।

कब कौन सी सूची

उस एलिमेंट को चुनें जो आपके लिखे विचार से मेल खाए, उस लुक से नहीं जिसकी उम्मीद बाद में CSS से हो। बुलेट और नंबर डिफ़ॉल्ट प्रस्तुति हैं; HTML का फैसला यह है कि क्रम अर्थ का हिस्सा है या नहीं।

📊 शुरुआती के लिए ul बनाम ol

Need	Prefer	Why
बिना आवश्यक अनुक्रम के संबंधित आइटम	ul	क्रम अर्थ का हिस्सा नहीं
क्रम में स्टेप, रैंकिंग या निर्देश	ol	अनुक्रम अर्थ का हिस्सा है
एक आइटम के नीचे सब-पॉइंट	nest ul/ol inside that li	पदानुक्रम ईमानदार रखता है
पेज कॉलम या साइडबार layout	not lists alone	बाद में CSS और संरचनात्मक layout इस्तेमाल करें

अनऑर्डरड सूची

शॉपिंग-स्टाइल बुलेट सूची क्लासिक ul डेमो है। हर आइटम एक li है। यहाँ शुरू करें जब आइटम समान स्तर के हों — फल के नाम, शौक लेबल, या फीचर हाइलाइट जिन्हें पाठ बिगाड़े बिना घुमाया जा सके।

Unordered list

html

HTML Code

<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>

अनऑर्डरड सैंपल पढ़ना

ul अनऑर्डरड सूची कंटेनर खोलता है
प्रत्येक li उस समूह का एक आइटम है
क्लोज़िंग टैग सही नेस्ट होने चाहिए: ul बंद करने से पहले हर li खत्म करें
डिफ़ॉल्ट बुलेट ब्राउज़र स्टाइल हैं; बाद में CSS मार्कर बदल सकता है, पर HTML अर्थ «अनऑर्डरड सेट» रहता है
खाली li और गायब क्लोज़ आम टाइपो हैं — जल्दी पेज देखकर पकड़ें

नेस्टेड सबलिस्ट वाली ऑर्डरड सूची

नंबर वाले स्टेप अक्सर एक स्टेप के नीचे छोटे बुलेट समूह चाहते हैं — बनाने के लिए फाइलें, खोलने के लिए टूल, या सिर्फ उस स्टेप की सामग्री। इनर सूची उसी स्टेप के li के अंदर रखें, पूरे ol के बगल में sibling के रूप में नहीं। बाहरी नंबर पढ़ने योग्य रहते हैं जबकि इनर बुलेट विवरण साफ करते हैं।

Ordered list with a nested list

html

HTML Code

<ol>
<li>Open the editor</li>
<li>
Create files
<ul>
<li>index.html</li>
<li>styles.css</li>
</ul>
</li>
<li>Save and refresh</li>
</ol>

नेस्टेड सैंपल पढ़ना

बाहरी ol मुख्य स्टेप को क्रम में नंबर देता है
दूसरा li इंट्रो टेक्स्ट प्लस चाइल्ड ul रखता है
इनर li नेस्टेड ul के हैं; वह ul पैरेंट li बंद होने से पहले बंद होता है
तीसरा स्टेप नेस्टेड ब्लॉक खत्म होने के बाद बाहरी ऑर्डरड अनुक्रम जारी रखता है
यह पैटर्न गहरे नेस्ट तक बढ़ता है, पर शुरुआती पेड़ उथले रखें ताकि ओपन/क्लोज क्रम साफ रहे
अगर नंबर «गलत» लगें, जाँचें क्या li जल्दी बंद होकर नेस्टेड सूची बाहर धकेल दी

पहले अर्थ, बाद में स्टाइल

ब्राउज़र बिना अतिरिक्त CSS बुलेट और नंबर बनाते हैं। वह सुविधा सूची को इंडेंट मशीन या नकली साइडबार के रूप में गलत इस्तेमाल करने का लालच देती है। यहाँ विरोध करें। अगर कंटेंट सेट या अनुक्रम है, मार्कर बदलने से पहले भी सूची मार्कअप सही सिमेंटिक चुनाव है। अगर साइड-बाय-साइड कार्ड, nav बार ग्रिड, या मैगज़ीन कॉलम चाहिए, CSS और संरचनात्मक layout पाठों का इंतज़ार करें — सिर्फ इसलिए कि मेनू बाद में सावधानी से स्टाइल की गई सूचियाँ इस्तेमाल करते हैं, ul को पेज फ्रेमवर्क न बनाएँ।

पहुँच और स्कैनिंग आदतें

सूचियाँ स्किमिंग में मदद करती हैं और सहायक तकनीक «तीन आइटम की सूची» जैसे वाक्य घोषित कर सकती है। जहाँ हो सके हर li को एक विचार पर रखें। हर आइटम में विशाल असंबंधित पैराग्राफ न ठूँसें जब तक कंटेंट सच में वह गहराई न माँगे। केवल तब नेस्ट करें जब पदानुक्रम असली हो — सिर्फ इंडेंट के लिए नकली नेस्टिंग इंसान और टूल दोनों को भ्रमित करती है। सूची के ऊपर छोटा हेडिंग अक्सर पहले बुलेट से पहले समूह का विषय साफ करता है।

अपने एडिटर में अभ्यास

तीन शौक का ul बनाएँ (या तीन खाद्य — आइटम छोटे रखें)।
तीन सुबह के स्टेप का ol उसी क्रम में बनाएँ जो आप सच में करते हैं।
उन li में से एक के नीचे छोटा ul नेस्ट करें (जैसे खोलने वाली फाइलें या लेने वाले टूल)।
मानसिक रूप से जाँचें: हर li किसी ul या ol के अंदर है; नेस्टेड सूचियाँ एक li के अंदर हैं।
एक सूची का प्रकार बदलें (ul ↔ ol) और पूछें कि अर्थ अभी भी कंटेंट से मेल खाता है या नहीं।
ब्राउज़र में पेज देखें और पुष्टि करें कि बिना कोई CSS लिखे बुलेट/नंबर दिखते हैं।
जानबूझकर एक बार नेस्ट तोड़ें, देखें आउटलाइन कितनी गलत लगती है, फिर क्लोज़ ठीक करें।

आसान गलतियाँ

किसी भी ul/ol के बाहर li लिखना (अनाथ आइटम)
सिर्फ यादृच्छिक पैराग्राफ इंडेंट या नकली कॉलम के लिए सूची इस्तेमाल करना
सही क्रम में नेस्टेड सूचियाँ बंद करना भूलना
नेस्टेड ul को li के sibling के रूप में रखना, एक li के अंदर नहीं
बिना अर्थ सोचे बिना अनुक्रम वाले आइटम के लिए ol (या सख्त स्टेप नंबर के लिए ul) चुनना
सिर्फ-layout ट्यूटोरियल से सूची मार्कअप कॉपी करना जो सिमेंटिक्स सिखाने से पहले ul को मेनू ग्रिड मानते हैं
लंबे नेस्टेड ब्लॉक के बाद बाहरी सूची खुली छोड़ना

सारांश

अनऑर्डरड सेट के लिए ul + li (डिफ़ॉल्ट बुलेट)
ऑर्डरड अनुक्रम के लिए ol + li (डिफ़ॉल्ट नंबर)
सबलिस्ट को li के अंदर नेस्ट करें, पैरेंट सूची के बगल में नहीं
वह सूची प्रकार चुनें जो अर्थ से मेल खाए
सूचियों को CSS layout कॉलम का विकल्प न बनाएँ
plug-in इतिहास नोट के बाद सूचियाँ आपको रोजमर्रा संरचनात्मक HTML पर लौटाती हैं जिसे आप फिर इस्तेमाल करते रहेंगे

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा