List Types

• Unordered Lists — Bullet Wali List

Unordered list jaise Paradise ka menu — Starters, Main Course, Desserts. Order matter nahi karta. Aap pehle dessert dekh sakte ho, phir starters. Bas items ka collection hai.

<ul> tag bullet-point list banata hai. Har item <li> mein. Browser automatically bullet markers add karta hai. Bullet style change kar sakte ho: disc (default), circle, square, ya none.

🛺

Menu Analogy: Paradise menu pe "Starters, Main Course, Desserts" likha hai. Koi sequence nahi — pehle dessert dekh sakte ho phir starters. Yeh unordered list hai — collection hai, order nahi.

Code Example

HTML — Unordered Lists — Bullet Wali List

<!-- Basic unordered list -->
<ul>
  <li>Hyderabadi Biryani</li>
  <li>Haleem</li>
  <li>Double ka Meetha</li>
  <li>Irani Chai</li>
</ul>

<!-- Different bullet types -->
<ul style="list-style-type: circle;">
  <li>Circle bullet</li>
  <li>Circle bullet</li>
</ul>

<ul style="list-style-type: square;">
  <li>Square bullet</li>
  <li>Square bullet</li>
</ul>

<!-- No bullets (navigation menu style) -->
<ul style="list-style-type: none;">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

<!-- Custom image as bullet -->
<ul style="list-style-image: url('star.svg');">
  <li>Featured item</li>
  <li>Featured item</li>
</ul>

<ul>Unordered list — bullets add karta hai

<li>List item — har point

list-style-type: discFilled circle (default)

list-style-type: circleEmpty circle outline

list-style-type: squareFilled square

list-style-type: noneNo bullet — nav menus ke liye

list-style-imageCustom image bullet marker ke liye

✅ When to Use

Feature lists — "Is course mein kya seekhoge"
Navigation menus (none + CSS se style karo)
Ingredient lists — "Biryani ke ingredients"
Koi bhi collection jahan order matter na kare
Tags, categories, checkboxes

❌ When NOT to Use

Step-by-step processes (ordered list use karo)
Rankings ya numbered sequences (ordered list use karo)

💡

Navigation menus HAMESHA unordered lists hote hain `list-style-type: none` ke saath. Yeh semantic HTML hai — screen readers "list with 5 items" announce karte hain nav ke liye, jo accessibility ke liye helpful hai. Nav ke liye kabhi divs mat use karo.

← Back to Lists Chapter