HTML Lists

Unordered Lists (ul और li)

Unordered lists का उपयोग तब किया जाता है जब listed items का क्रम मायने नहीं रखता। ब्राउज़र इन्हें bullet points के रूप में display करता है। list container ul tag का उपयोग करता है, और हर list item li tag के अंदर लपेटा जाता है।

उदाहरण: Unordered Lists (ul and li)

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

Ordered Lists (ol और li)

अगर आप instructions या list rankings का कोई सेट code कर रहे हैं, तो items का क्रम महत्वपूर्ण होता है। Ordered lists मुख्य container के रूप में ol tag का उपयोग करती हैं, और ब्राउज़र स्वचालित रूप से हर nested li item को क्रमानुसार numbered करता है।

उदाहरण: Ordered Lists (ol and li)

<ol>
  <li>Preheat oven</li>
  <li>Mix ingredients</li>
</ol>

List Markers को Customize करना (type और start)

By default, ordered lists numbers (1, 2, 3) का उपयोग करती हैं, और unordered lists ठोस circular bullets का उपयोग करती हैं।

आप इन lists को attributes का उपयोग करके customize कर सकते हैं: type attribute numbering style बदलता है (जैसे Roman numerals या letters), और start attribute एक custom शुरुआती number सेट करता है।

उदाहरण: Customizing List Markers (type and start)

<ol type="I" start="3">
  <li>Third</li>
  <li>Fourth</li>
</ol>

Lists के अंदर Lists Nest करना

complex directories या sub-categories को represent करने के लिए, आप एक list को सीधे दूसरे के अंदर nest कर सकते हैं। ऐसा करने के लिए, आप secondary list container को अपनी primary list के किसी specific li item के अंदर रखते हैं।

उदाहरण: Nesting Lists Inside Lists

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

Description Lists (dl, dt, dd)

किसी dictionary, glossary, या product specifications list को code करते समय, standard bullets सबसे अच्छा format नहीं होते।

Description lists terms और descriptions को तीन tags का उपयोग करके group करती हैं: dl (description list), dt (definition term), और dd (definition description)।

उदाहरण: Description Lists (dl, dt, dd)

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

reversed Attribute

किसी ordered list पर reversed attribute numbering को ऊपर की बजाय नीचे की ओर count कराता है, बिना HTML में list items के असल क्रम को बदले।

यह countdowns या ranked lists के लिए उपयोगी है जहां सबसे महत्वपूर्ण item markup में सबसे आखिर में दिखना चाहिए लेकिन फिर भी सबसे बड़ा number दिखाना चाहिए, या इसके उलट।

उदाहरण: The reversed Attribute

<ol reversed start="3">
  <li>Third</li>
  <li>Second</li>
  <li>First</li>
</ol>

सही List Type चुनना

जब items का क्रम सच में मायने न रखे, जैसे features का एक सेट, तब unordered list का उपयोग करें। जब क्रम मायने रखे, जैसे step-by-step instructions, तब ordered list का उपयोग करें।

जब आप terms को उनकी definitions या explanations के साथ जोड़ रहे हों, जैसे कोई glossary या FAQ, तब description list का उपयोग करें।

उदाहरण: Choosing the Right List Type

<ul>
  <li>Fast shipping</li>
</ul>
<ol>
  <li>Add to cart</li>
</ol>
<dl>
  <dt>SKU</dt>
  <dd>Product code</dd>
</dl>