HTML में List क्या है? – HTML List in Hindi

by

HTML में List का इस्तेमाल किसी भी प्रकार की information या data को व्यवस्थित तरीके से दिखाने के लिए किया जाता है।

दूसरे शब्दों में कहें तो, “HTML में List का उपयोग data को क्रमबद्ध (ordered) या बिना क्रमबद्ध (unordered) तरीके से प्रस्तुत करने के लिए किया जाता है।”

HTML में मुख्य रूप से तीन प्रकार की lists होती हैं:-

  1. Ordered List (क्रमबद्ध सूची)
  2. Unordered List (अक्रमबद्ध सूची)
  3. Description List (विवरण सूची)

1. Ordered List (क्रमबद्ध सूची)

Ordered List का उपयोग तब किया जाता है जब हमें किसी जानकारी को क्रमबद्ध तरीके से दिखाना होता है। इसके लिए <ol> tag का उपयोग किया जाता है।

इसका Syntax:

<ol>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

Output:

यह list नंबरों के साथ दिखेगी

  1. First Item
  2. Second Item
  3. Third Item

2. Unordered List (अक्रमबद्ध सूची)

Unordered List का उपयोग तब किया जाता है जब हमें किसी जानकारी को बिना किसी विशेष क्रम (sequence) के दिखाना होता है। इसमें बुलट पॉइंट्स (bullet points) का इस्तेमाल किया जाता है। इसके लिए <ul> tag का उपयोग किया जाता है।

Syntax:

<ul>

  <li>First Item</li>

  <li>Second Item</li>

  <li>Third Item</li>

</ul>

यह list कुछ इस प्रकार दिखेगी:-

  • First Item
  • Second Item
  • Third Item

3. Description List (विवरण सूची)

Description List का उपयोग तब किया जाता है जब हमें किसी item का description (विवरण) देने की जरूरत होती है। इसमें <dl> (description list) टैग का उपयोग होता है, और <dt> (description term) टैग से हम शब्द को और <dd> (description definition) से उसका description देते हैं।

Syntax:

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

आउटपुट:-

HTML
: HyperText Markup Language

CSS
: Cascading Style Sheets

HTML में List का उदाहरण

1:- Ordered List (क्रमबद्ध सूची) का उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List Example</title>
</head>
<body>
    <h2>Ordered List Example</h2>
    <ol type="I">
        <li>भारत</li>
        <li>अमेरिका</li>
        <li>जापान</li>
    </ol>
</body>
</html>

आउटपुट:-

I. भारत
II. अमेरिका
III. जापान

2:- Unordered List (अक्रमबद्ध सूची) का उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>Unordered List Example</title>
</head>
<body>
    <h2>Unordered List Example</h2>
    <ul type="square">
        <li>किताबें</li>
        <li>कॉपी</li>
        <li>पेन</li>
    </ul>
</body>
</html>

Output:
■ किताबें
■ कॉपी
■ पेन

3:- Description List का उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>Definition List Example</title>
</head>
<body>
    <h2>Definition List Example</h2>
    <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
    </dl>
</body>
</html>

Output:

HTML
: HyperText Markup Language

CSS
: Cascading Style Sheets

Nested List क्या है?

HTML में, एक list के अंदर दूसरे list को भी रखा जा सकता है। इसे Nested List कहा जाता है।

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

आउटपुट:–

  • Fruits
    • Apple
    • Banana
  • Vegetables
    • Carrot
    • Spinach

इसे भी पढ़ें:–

Leave a Comment