HTML Lists in Hindi

HTML में lists का इस्तेमाल एक जैसे items को क्रमबद्ध (ordered) या बिंदु रूप (unordered) में दिखाने के लिए किया जाता है। यह content को clear और समझने में आसान बनाता है।

Ordered List (<ol>)

Ordered List उन items को दिखाने के लिए use होती है जिन्हें किसी particular sequence या numbering में दिखाना होता है। इसमें numbers (1, 2, 3...) या letters (a, b, c...) use होते हैं।

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

यह output में numbered list दिखाएगा।

Unordered List (<ul>)

Unordered List ऐसे items के लिए use होती है जिन्हें किसी order में नहीं दिखाना होता। इसमें bullets (●) का use होता है।

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

यह output में एक bullet-style list दिखाता है।

Description List (<dl>)

Description List का use definition-type content के लिए किया जाता है, जैसे dictionary style में terms और उनके meaning.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

इसमें <dt> (definition term) और <dd> (definition detail) tags होते हैं।

List Item (<li>)

Ordered और Unordered दोनों lists में हर एक item को <li> tag में लिखा जाता है। <li> का मतलब होता है List Item.

Nesting of Lists

HTML में आप एक list के अंदर दूसरी list भी बना सकते हैं, जिसे nested list कहते हैं। यह तब useful होता है जब किसी item के अंदर sub-items दिखाने हों।

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

HTML List Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Lists Demo</title>
</head>
<body>
  <h1>HTML Lists Demo</h1>
  <!-- Ordered List -->
  <h2>1. Ordered List>/h2>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>

  <!-- Unordered List -->
  <h2>2. Unordered List>/h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ul>

  <!-- Description List -->
  <h2>3. Description List>/h2>
  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dt>JS</dt>
    <dd>JavaScript</dd>
  </dl>

  <!-- Nested List -->
  <h2>4. Nested List</h2>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </li>
    <li>Backend
      <ul>
        <li>PHP</li>
        <li>Python</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Request

अगर आपको यह article useful या interesting लगा हो, तो please इसे अपने dosto aur family ke साथ जरूर share करें। आपका एक छोटा सा कदम हमें और अच्छा content बनाने के लिए motivate करता है। Thank you!

ध्यान दें कि इस page पर आपको कुछ ads भी देखने को मिल सकते हैं। इसके लिए हम आपसे माफी चाहते हैं। हम इस content को तैयार करने में काफी मेहनत और time लगाते हैं, ताकि आपको valuable जानकारी मिल सके। इन्हीं ads की मदद से हम ये काम continue कर पाते हैं।

आपके support और understanding के लिए दिल से धन्यवाद।

deepeweb.github.io