HTML Unordered Lists

एक unordered list उस group of items के लिए है जहां order matter नहीं करता -- एक shopping list, features का एक set, ingredients की एक list -- और हर item को visually एक bullet point के साथ चिन्हित किया जाता है न कि किसी number से, जो reader को यह संकेत देता है कि item order का कोई खास मतलब नहीं है।

In this page:

एक बुनियादी Unordered List बनाना
Sublists Nest करना
Bullet Style बदलना
Navigation Menus के लिए Bullets हटाना
Marker के रूप में एक Custom Image उपयोग करना

Syntax

markup

<ul style="list-style-type: value;">
  <li>Item</li>
  <li>Item</li>
</ul>

एक बुनियादी Unordered List बनाना

<ul> पूरी list को लपेटता है, और हर individual item अपने खुद के <li> (list item) tag के अंदर जाता है। ब्राउज़र default रूप से हर <li> को एक bullet point के साथ render करते हैं, visually यह संकेत देते हुए कि ये items एक संबंधित लेकिन unordered group बनाते हैं।

Note: किसी list का हर content अपने खुद के <li> में लपेटा होना चाहिए; <li> wrapper के बिना सीधे <ul> के अंदर रखा गया text invalid है।

Warning: किसी item पर closing </li> tag भूल जाने से कुछ browsers में अप्रत्याशित nesting behavior हो सकता है।

उदाहरण: Creating a Basic Unordered List

markup

<ul>
  <li>Milk</li>
  <li>Bread</li>
</ul>

Sublists Nest करना

एक sublist parent <li> के अंदर एक पूरी नई <ul> element रखकर बनाई जाती है, उसके बाद नहीं -- यह sublist को उस specific item का असल child बनाता है, और ब्राउज़र स्वचालित रूप से इसे indent करते हैं और अक्सर nesting depth को visually अलग दिखाने के लिए bullet style बदल देते हैं।

Note: सही nesting बनाए रखने के लिए nested ul को हमेशा parent li के opening और closing tags के पूरी तरह अंदर रखें।

Warning: एक nested ul को </li> के अंदर रखने के बजाय बाद में sibling के रूप में रखना sublist के semantic parent-child relationship को तोड़ देता है।

उदाहरण: Nesting Sublists

markup

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
    </ul>
  </li>
</ul>

Bullet Style बदलना

list-style-type हर item से पहले दिखने वाले marker shape को नियंत्रित करता है -- disc (एक भरा हुआ circle, default), circle (एक खोखला circle), या square (एक भरा हुआ square) -- जिससे आप nested list levels को visually अलग कर सकते हैं या किसी design की aesthetic से मैच कर सकते हैं।

Note:

readers को यह visually अलग करने में मदद करने के लिए कि कोई sublist कितनी गहरी है, अलग-अलग nesting levels में अलग-अलग list-style-type values का उपयोग करें।
Accepted values:
list-style-type — disc | circle | square | none (CSS)
ul पर type — obsolete

Warning: किसी navigation menu पर सिर्फ decoration के लिए list-style-type बदलना फिर भी screen readers के लिए underlying semantic list structure को बरकरार रखता है।

उदाहरण: Changing the Bullet Style

markup

<ul style="list-style-type: square;">
  <li>Item one</li>
  <li>Item two</li>
</ul>

Navigation Menus के लिए Bullets हटाना

list-style: none bullet marker को पूरी तरह हटा देता है, जो एक semantically सही <ul> को horizontal या vertical navigation menu में बदलने की standard technique है, जो accessible list structure बनाए रखते हुए visually bulleted list जैसा बिल्कुल नहीं दिखता।

Note: assistive technology के लिए semantic list structure बनाए रखने हेतु navigation menus के लिए plain divs की series के बजाय list-style: none से styled एक असल ul को प्राथमिकता दें।

Warning: list-style: none के साथ-साथ default margin और padding हटाना आमतौर पर जरूरी होता है, क्योंकि visible bullets न होने पर भी browsers default list indentation apply करते रहते हैं।

उदाहरण: Removing Bullets for Navigation Menus

markup

<ul style="list-style: none;">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
</ul>

Marker के रूप में एक Custom Image उपयोग करना

list-style-image आपको default bullet shape को एक छोटी custom image से बदलने देता है, जो एक branded checklist look के लिए उपयोगी है, हालांकि modern CSS अक्सर list-style-image के बजाय ::marker pseudo-element या li पर background-image का उपयोग करके ज़्यादा consistent, scalable results हासिल करता है।

Note: अपने marker image का size ध्यान से set करें या list-style-image अकेले की तुलना में ज़्यादा reliable, consistent cross-browser positioning के लिए ::marker pseudo-element का उपयोग करें।

Warning: ::marker को style करने या background-image trick का उपयोग करने की तुलना में list-style-image marker के exact size और position पर limited control देता है।

उदाहरण: Using a Custom Image as a Marker

markup

<ul style="list-style-image: url('check.png');">
  <li>Completed step</li>
</ul>

Live Example

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Lists Next Lesson → HTML Ordered Lists

HTML Unordered Lists

एक बुनियादी Unordered List बनाना

Sublists Nest करना

Bullet Style बदलना

Navigation Menus के लिए Bullets हटाना

Marker के रूप में एक Custom Image उपयोग करना

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code