HTML List

अब हम एक और बहुत useful और frequently used HTML topic सीखने जा रहे हैं — जो हर वेबसाइट, ब्लॉग या content पेज में ज़रूर मिलता है

HTML List क्या है?

जब आपको किसी चीज़ों की सूची (list) बनानी होती है — जैसे कि Items, Steps, Features, या Menu — तो HTML में इसके लिए List Tags का इस्तेमाल किया जाता है। HTML में तीन प्रकार की Lists होती हैं

प्रकार	विवरण
`<ol>`(Ordered List)	नंबर वाली लिस्ट (1, 2, 3...) बनाने के लिए उपयोग होता है।
`<ul>`(Unordered List)	बुलेट वाली लिस्ट (•, ○, ■) बनाने के लिए उपयोग होता है।
`<dl>`(Description List)	Term और उसका Description दिखाने के लिए उपयोग होता है। इसमें`<dt>`(term) और`<dd>`(description) टैग का इस्तेमाल किया जाता है।

Example 1: Unordered List (ul)

Unordered list में items के आगे bullets (•) आते हैं।

<h3>Unordered List Example</h3>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Output:

HTML
CSS
JavaScript

हर item को <li> टैग से लिखा जाता है।

Example 2: Ordered List (<ol>)

Ordered list में items के आगे numbers (1, 2, 3...) आते हैं।

<h3>Ordered List Example</h3>
<ol>
  <li>Open VS Code</li>
  <li>Create a new file</li>
  <li>Save as index.html</li>
  <li>Start coding!</li>
</ol>

Output:

Open VS Code
Create a new file
Save as index.html
Start coding!

<li> क्या करता है?

<li> का मतलब होता है — List Item हर एक <li> टैग एक point या step को represent करता है।

List Style Type बदलना

आप CSS से लिस्ट के बुलेट या नंबर की style बदल सकते हैं।

<ul style="list-style-type: square;">
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

<ol style="list-style-type: upper-roman;">
  <li>First Step</li>
  <li>Second Step</li>
  <li>Third Step</li>
</ol>

Output:

Apple
Banana
Mango

First Step
Second Step
Third Step

List Style Types

For <ul> (Unordered List)

disc (default)
circle
square
none

For <ol> (Ordered List)

decimal (1,2,3…)
upper-alpha (A,B,C…)
lower-alpha (a,b,c…)
upper-roman (I, II, III…)
lower-roman (i, ii, iii…)

Example 3: Nested Lists (List inside List)

आप एक लिस्ट के अंदर दूसरी लिस्ट डाल सकते हैं।

<h3>Nested List Example</h3>
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>PHP</li>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Output:

Nested List Example

Frontend
- HTML
- CSS
- JavaScript
Backend
- PHP
- Node.js
- Python

यह बहुत useful होता है जब आप categories और subcategories दिखाना चाहते हैं।

Example 4: Description List (<dl>)

जब आपको किसी term और उसके description को pair में दिखाना होता है (जैसे dictionary या FAQ में), तो <dl> (Description List) का प्रयोग किया जाता है।

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language – यह वेबसाइट की structure बनाती है।</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets – यह वेबसाइट को design देती है।</dd>
  
  <dt>JavaScript</dt>
  <dd>यह वेबसाइट को dynamic और interactive बनाता है।</dd>
</dl>

Output:

HTML: HyperText Markup Language – यह वेबसाइट की structure बनाती है।
CSS: Cascading Style Sheets – यह वेबसाइट को design देती है।
JavaScript: यह वेबसाइट को dynamic और interactive बनाता है।

Example 5: Stylish List with CSS

<style>
ul.custom {
  list-style-type: none;
  padding: 0;
}
ul.custom li {
  background: #0078D7;
  color: white;
  padding: 8px;
  margin: 5px 0;
  border-radius: 5px;
}
</style>

<ul class="custom">
  <li>Home</li>
  <li>About Us</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

Output: Home About Us Services Contact यह स्टाइल menu design करने में बहुत काम आती है

Extra Tip: Horizontal List (Menu Style)

आप list को horizontal (side-by-side) भी दिखा सकते हैं:

<style>
ul.nav {
  list-style-type: none;
  display: flex;
  gap: 20px;
}
ul.nav li {
  background-color: #222;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

<ul class="nav">
  <li>Home</li>
  <li>Courses</li>
  <li>Blog</li>
  <li>Contact</li>
</ul>

Output: एक horizontal menu जैसा दिखेगा — Home | Courses | Blog | Contact

Summary

List Type	Tag	Example
Unordered	`<ul>`	• Apple, • Mango
Ordered	`<ol>`	1. Step 1, 2. Step 2
Description	`<dl>`	HTML – Web structure