Lists: Ordered, Unordered, aur Description Lists
Introduction
Webpages me information ko properly organize karne ke liye Lists ka use kiya jata hai. Lists content ko clean, readable aur user-friendly banati hain.
HTML me mainly 3 types ki lists hoti hain:
Ordered List
Unordered List
Description List
Aaj hum in tino lists ko detail me seekhenge.
HTML List Kya Hoti Hai?
HTML list multiple items ko ek structured format me show karti hai.
Example:
Fruits
Vegetables
Mobile Phones
Ye sab lists ke examples hain.
Types of HTML Lists
Ordered\ List\ +\ Unordered\ List\ +\ Description\ List
1. Ordered List (<ol>)
Ordered list me items numbering ke sath show hote hain.
Example:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Output
HTML
CSS
JavaScript
Ordered List Ka Use
Step-by-step tutorials
Ranking lists
Instructions
Recipes
Ordered List Attributes
1. Type Attribute
Number style change karne ke liye use hota hai.
Example:
<ol type="A">
<li>HTML</li>
<li>CSS</li>
</ol>
Ordered List Types
| Type | Output |
|---|---|
1 | 1,2,3 |
A | A,B,C |
a | a,b,c |
I | I,II,III |
i | i,ii,iii |
2. Start Attribute
List ko specific number se start kar sakte hain.
Example:
<ol start="5">
<li>HTML</li>
<li>CSS</li>
</ol>
2. Unordered List (<ul>)
Unordered list me bullet points use hote hain.
Example:
<ul>
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ul>
Output
Mango
Apple
Banana
Unordered List Ka Use
Product Features
Navigation Menu
Notes
Categories
Unordered List Bullet Types
Example:
<ul type="square">
<li>HTML</li>
<li>CSS</li>
</ul>
Bullet Types
| Type | Shape |
|---|---|
disc | ● |
circle | ○ |
square | ■ |
3. Description List (<dl>)
Description list terms aur unki descriptions show karne ke liye use hoti hai.
Important Tags
| Tag | Use |
|---|---|
<dl> | Description List |
<dt> | Term |
<dd> | Description |
Example
<dl>
<dt>HTML</dt>
<dd>HTML is used to create webpages.</dd>
<dt>CSS</dt>
<dd>CSS is used for styling.</dd>
</dl>
Description List Ka Use
Definitions
Glossary
FAQ sections
Technical documentation
Nested Lists
Ek list ke andar dusri list bhi bana sakte hain.
Example:
<ul>
<li>Programming
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
</li>
</ul>
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h1>HTML Lists</h1>
<h2>Ordered List</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ul>
<h2>Description List</h2>
<dl>
<dt>HTML</dt>
<dd>Used to create webpages.</dd>
<dt>CSS</dt>
<dd>Used for styling webpages.</dd>
</dl>
</body>
</html>
Common Beginner Mistakes
1. <li> Ko Direct Body Me Likhna
Wrong:
<li>HTML</li>
Correct:
<ul>
<li>HTML</li>
</ul>
2. Ordered aur Unordered List Confuse Karna
Ordered = Numbering
Unordered = Bullet Points
3. Closing Tags Bhool Jana
Har tag properly close karna important hai.
Mini Practice Task
Ek webpage banao jisme:
1 ordered list
1 unordered list
1 description list
ho.
Practice Code
<!DOCTYPE html>
<html>
<head>
<title>Practice Lists</title>
</head>
<body>
<h1>My Skills</h1>
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
<ul>
<li>Gaming</li>
<li>Reading</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>Webpage structure language.</dd>
</dl>
</body>
</html>
Interview Questions
Q1. Ordered list ke liye kaunsa tag use hota hai?
<ol>
Q2. Bullet list ke liye kaunsa tag use hota hai?
<ul>
Q3. Description list me description ke liye kaunsa tag use hota hai?
<dd>
Conclusion
Aaj aapne HTML lists ke tino types ko detail me seekha. Lists webpage content ko organize aur readable banati hain. Har professional website me lists ka use hota hai.