HTML Unordered Lists

HTML Unordered List का उपयोग items को बिना किसी क्रम (order) के दिखाने के लिए किया जाता है।
इसमें items के आगे bullets दिखाई देते हैं, न कि numbers.

Unordered lists menus, feature lists और options दिखाने के लिए बहुत common हैं।

Unordered List के लिए कौन-से Tags होते हैं

HTML Unordered List में दो main tags use होते हैं:

<ul> – Unordered List container
<li> – List item

Basic Unordered List Syntax

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Browser default रूप से round bullets दिखाता है।

Simple Unordered List Example

<ul>
  <li>Tea</li>
  <li>Coffee</li>
  <li>Milk</li>
</ul>

यह shopping list या options list के लिए useful है।

Default Bullet Style

By default, unordered list में यह style होता है:

Bullet type: disc
Left indentation present

Browser अपने default CSS apply करता है।

Bullet Style Change करना

CSS की मदद से bullet style बदला जा सकता है।

<style>
ul {
  list-style-type: square;
}
</style>

Common bullet styles:
disc
circle
square

Circle Bullet Example

<ul style="list-style-type: circle;">
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

Bullets Remove करना

Navigation menus बनाने के लिए bullets हटाना बहुत common है।

<style>
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
</style>

अब list normal text की तरह दिखेगी।

Unordered List में Images as Bullets

<style>
ul {
  list-style-image: url('bullet.png');
}
</style>

Custom design के लिए image bullets use किए जाते हैं।

Nested Unordered Lists

Unordered list के अंदर दूसरी unordered list बनाई जा सकती है।

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

यह category-subcategory structure दिखाने के लिए useful है।

Horizontal Unordered List

Menus बनाने के लिए list items को horizontal किया जाता है।

<style>
li {
  display: inline;
  margin-right: 15px;
}
</style>

यह simple navigation bar बनाने में काम आता है।

Unordered List as Navigation Menu

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

CSS के साथ यह full navigation menu बन सकता है।

Spacing Control करना

<style>
li {
  margin-bottom: 8px;
}
</style>

Items के बीच proper spacing readability बढ़ाता है।

Accessibility और Unordered Lists

Unordered lists screen readers के लिए easy होती हैं।
Menus और grouped content के लिए <ul> use करना accessibility के लिए best practice है।

Common Mistakes

<ul> के बाहर <li> लिखना
Unnecessary deep nesting
CSS से list semantics बिगाड़ देना
Paragraph content को list में डाल देना

Best Practices

Navigation के लिए unordered list use करें
Simple और clean structure रखें
Bullets remove करने पर padding reset करें
Nested lists को limited रखें

Summary

HTML Unordered List items को बिना किसी order के display करती है। <ul> और <li> tags इसका base होते हैं। CSS के साथ bullets, spacing और layout easily customize किए जा सकते हैं।