HTML Lists का उपयोग items को structured और readable format में दिखाने के लिए किया जाता है।
Lists content को organized बनाती हैं और webpages पर information को clear तरीके से present करती हैं।
HTML में मुख्य रूप से तीन प्रकार की lists होती हैं।
Unordered List क्या होती है
Unordered List में items का कोई specific order नहीं होता।
Items के आगे bullet points दिखाई देते हैं।
Unordered List के लिए <ul> tag और items के लिए <li> tag use होता है।
Unordered List Syntax
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Unordered List Example
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
Browser default round bullets दिखाता है।
Ordered List क्या होती है
Ordered List में items एक fixed order में होते हैं।
Items के आगे numbers या letters दिखाई देते हैं।
Ordered List के लिए <ol> tag use होता है।
Ordered List Syntax
<ol>
<li>Wake Up</li>
<li>Exercise</li>
<li>Study</li>
</ol>
Ordered List Example
<ol>
<li>Register</li>
<li>Login</li>
<li>Dashboard</li>
</ol>
यह steps या instructions दिखाने के लिए useful होती है।
Ordered List Types
Ordered List में numbering type change की जा सकती है।
<ol type="A">
<li>Option One</li>
<li>Option Two</li>
</ol>
Common types: 1 – Numbers
A – Uppercase letters
a – Lowercase letters
I – Roman numbers
i – Small roman numbers
Description List क्या होती है
Description List का उपयोग term और उसकी description दिखाने के लिए किया जाता है।
इसमें तीन tags होते हैं: <dl> – Description list<dt> – Term<dd> – Description
Description List Syntax
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
यह glossary और definition pages के लिए useful होती है।
Nested Lists क्या होती हैं
Lists के अंदर lists को Nested Lists कहा जाता है।
Nested List Example
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend</li>
</ul>
Complex menu structures में nested lists common हैं।
List Style Change करना
CSS से list markers को change किया जा सकता है।
<style>
ul {
list-style-type: square;
}
</style>
Common list-style-types: disc
circle
square
decimal
none
Remove List Bullets
<style>
ul {
list-style-type: none;
padding: 0;
}
</style>
Navigation menus बनाने में यह बहुत common है।
Horizontal List बनाना
<style>
li {
display: inline;
margin-right: 15px;
}
</style>
Menus और navbars के लिए useful होता है।
Accessibility और Lists
Lists screen readers के लिए बहुत friendly होती हैं।
Proper list structure content को easily understandable बनाता है।
Common Mistakes
List के बाहर <li> use करना
Unnecessary nested lists
CSS से list semantics खराब करना
Long paragraphs को list में डाल देना
Best Practices
Proper list type चुनें
Readable spacing रखें
Navigation के लिए unordered list use करें
Steps के लिए ordered list prefer करें
Summary
HTML Lists content को structured और organized बनाती हैं।
Unordered, Ordered और Description lists अलग-अलग purposes के लिए use होती हैं।
Proper list usage website की readability और accessibility दोनों improve करती है।