HTML Lists – सभी प्रकार की लिस्ट का परिचय
HTML में Lists का उपयोग items को क्रमबद्ध (ordered) या बेतरतीब (unordered) तरीके से दिखाने के लिए किया जाता है। यह वेबसाइट पर structured content दिखाने के लिए बहुत ज़रूरी है – जैसे menu, steps, features, FAQs आदि।
🔷 HTML में कुल कितनी प्रकार की Lists होती हैं?
HTML में मुख्यतः 3 प्रकार की lists होती हैं:
| List Type | टैग | विशेषता |
|---|---|---|
| 1. Unordered List | <ul> | बुलेट (●) के साथ बिना क्रम वाली लिस्ट |
| 2. Ordered List | <ol> | नंबरिंग (1, 2, 3…) या letters (a, b, c…) के साथ क्रमबद्ध लिस्ट |
| 3. Description List | <dl>, <dt>, <dd> | Terms और उनके विवरण वाली लिस्ट |
🔶 1. Unordered List (बिना क्रम वाली सूची)
Example:
<ul>
<li>सेब</li>
<li>केला</li>
<li>अंगूर</li>
</ul>
📌 यह list बुलेट्स (●) के साथ दिखेगी।<ul> tag list को define करता है और <li> से प्रत्येक item लिखा जाता है।
🔶 2. Ordered List (क्रम वाली सूची)
Example:
<ol>
<li>HTML सीखें</li>
<li>CSS सीखें</li>
<li>JavaScript सीखें</li>
</ol>
📌 यह list numbering के साथ आती है – 1, 2, 3…<ol> tag ordered list के लिए होता है।
🔶 3. Description List (Term और Description की सूची)
Example:
<dl>
<dt>HTML</dt>
<dd>वेब पेज बनाने की भाषा</dd>
<dt>CSS</dt>
<dd>पेज को स्टाइल देने की भाषा</dd>
</dl>
📌 इसमें:
<dt>= Definition Term<dd>= Definition Description
🔷 HTML List के अन्य उपयोगी Features
| Feature | Description |
|---|---|
| List Nesting | List के अंदर List बनाना |
| Type Attribute | Ordered list में number, letter, roman इत्यादि |
| Start Attribute | Ordered list को किसी number से start करना |
| Custom CSS Styling | Bullet की जगह icon, image या custom style देना |
| Horizontal List | Lists को inline/row में दिखाना (menus के लिए) |
📌 HTML Lists क्यों ज़रूरी हैं?
- साफ़-सुथरा Content Structure
- पढ़ने में आसान
- UX और SEO दोनों के लिए लाभदायक
- Navigation menus, Features, Instructions आदि में उपयोगी
🔚 इस Overview Chapter में आपने जाना:
- HTML में कितनी प्रकार की Lists होती हैं
- Basic syntax हर एक की
- उनकी विशेषताएँ और उपयोग
अगले Chapters होंगे:
| Chapter | टॉपिक |
|---|---|
| 2 | HTML Unordered List |
| 3 | HTML Ordered List |
| 4 | HTML Description List |
| 5 | Nested Lists |
| 6 | List Styling with CSS |
| 7 | Custom Bullets & Icons |
| 8 | Horizontal / Inline Lists |