HTML Lists: ul, ol, dl और Nested Lists
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
सूचियाँ जुड़ी हुई चीज़ों को एक साथ रखती हैं। HTML में तीन तरह की सूचियाँ होती हैं: unordered lists (<ul>) bullets के साथ, ordered lists (<ol>) numbers के साथ, और description lists (<dl>) terms और उनके अर्थ के साथ। पहले दो में हर item एक <li> element होता है।
Unordered lists — बिना क्रम की सूचियाँ
<ul> तब इस्तेमाल करें जब क्रम मायने नहीं रखता: shopping list, features का समूह, navigation menu। Browser हर item के पहले डिफ़ॉल्ट रूप से bullet दिखाता है।
Ordered lists — क्रम वाली सूचियाँ
<ol> तब इस्तेमाल करें जब क्रम मायने रखता है: recipe के चरण, top 5, निर्देश। Browser items को अपने आप number देता है — 1, 2, 3। आप type attribute से numbering बदल सकते हैं (type="A" से A, B, C मिलते हैं; type="i" से i, ii, iii) और start="5" से किसी भी number से शुरू कर सकते हैं।
Description lists — विवरण वाली सूचियाँ
<dl> name-value जोड़ों के लिए इस्तेमाल करें: glossary, FAQ, या terms की सूची। हर term एक <dt> होता है और हर description एक <dd>।
सूचियों को एक-दूसरे के अंदर रखना
एक सूची किसी सूची के item के अंदर बैठ सकती है। ऐसे ही multi-level menus बनते हैं: एक <ul>, दूसरे <ul> के <li> के अंदर। बस याद रखें कि जिस item में अंदर वाली सूची है, उसे बंद करने से पहले अंदर वाली सूची को बंद करें।
सूचियाँ किस काम की हैं
सूची जुड़ी हुई चीज़ों का समूह है। HTML आपको तीन तरह देता है: <ul> उन items के लिए जिनमें क्रम मायने नहीं रखता (shopping list), <ol> उन items के लिए जिनमें क्रम मायने रखता है (recipe के चरण), और <dl> term और उसकी परिभाषा के लिए (जैसे dictionary)। ul या ol में हर item एक <li> होता है, और li हमेशा सीधे सूची के अंदर होना चाहिए — कभी अकेला नहीं।
याद रखने की तरकीब: ul = बिना क्रम, ol = क्रम से, dl = शब्द और अर्थ।
Ordered list के attributes
| Attribute | Value | विवरण |
|---|---|---|
type | 1, A, a, I, i | Numbering का style: 1, 2, 3 — A, B, C — a, b, c — I, II, III — i, ii, iii। |
start | a number | वह number जिससे सूची शुरू होती है। start="5" 5 से शुरू करता है। |
reversed | — | उल्टा गिनता है, बड़े से छोटे की ओर। |
यहाँ एक ordered list है जो 3 से शुरू होती है और capital letters से गिनती करती है:
<ol type="A" start="3"> <li>Third item</li> <li>Fourth item</li> </ol>
<dl> पूरी सूची के लिए, <dt> term के लिए, और <dd> description के लिए। यह glossary और FAQ पेजों के लिए एकदम सही है।list-style-type: square; से square bullets मिलते हैं, और list-style-type: none; उन्हें पूरी तरह हटा देता है, जिससे navigation menus बनते हैं।आम गलतियाँ
<li>को<ul>या<ol>के बाहर रखना — list items सिर्फ सूची के अंदर होते हैं।- एक ही item के लिए सूची इस्तेमाल करना — एक item सूची नहीं है, सिर्फ paragraph इस्तेमाल करें।
- नई सूची को
<li>के बाहर nest करना — sub-list उसी li के अंदर होनी चाहिए जिससे वह जुड़ी है। - क्रम से किए जाने वाले steps के लिए
<ul>इस्तेमाल करना — वह<ol>का काम है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h2>Shopping List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
<h2>Steps to Make Tea</h2>
<ol>
<li>Boil water.</li>
<li>Add tea leaves.</li>
<li>Pour and serve.</li>
</ol>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. HTML में कितने तरह की लिस्ट होती हैं?
ul बुलेट वाली, ol नंबर वाली और dl शब्द और उनके अर्थ वाली लिस्ट होती है।
2. ul की जगह ol कब इस्तेमाल करें?
जब क्रम ज़रूरी हो, जैसे रेसिपी के चरण या निर्देश, तब ol इस्तेमाल करें; ब्राउज़र खुद नंबर लगा देता है।
3. नेस्टेड लिस्ट कैसे बनाते हैं?
एक लिस्ट को दूसरी लिस्ट के li के अंदर रखें और उस आइटम को बंद करने से पहले अंदर वाली लिस्ट बंद करें।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
