HTML लिस्ट्स (सूचियाँ)

परिचय

HTML दस्तावेज़ में तीन प्रकार की सूचियाँ होती हैं: अक्रमित (Unordered) सूची, क्रमित (Ordered) सूची और विवरण (Description) सूची।

अक्रमित HTML सूची (Unordered List)

<ul> टैग से परिभाषित होती है जहां प्रत्येक सूची आइटम <li> टैग के बीच संलग्न होता है। डिफ़ॉल्ट रूप से बुलेट पॉइंट्स (डॉट्स) से चिह्नित होती है।

सिंटैक्स

<ul>
  <li>सूची आइटम</li>
  <li>सूची आइटम</li>
  <li>सूची आइटम</li>
</ul>

क्रमित HTML सूची (Ordered List)

<ol> टैग से परिभाषित होती है जहां प्रत्येक सूची आइटम <li> टैग के बीच संलग्न होता है। डिफ़ॉल्ट रूप से संख्याओं (1, 2, 3...) से क्रमांकित होती है।

सिंटैक्स

<ol>
  <li>सूची आइटम</li>
  <li>सूची आइटम</li>
  <li>सूची आइटम</li>
</ol>

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

<dl> टैग से परिभाषित होती है जहां प्रत्येक परिभाषित पद <dt> टैग के बीच और प्रत्येक विवरण <dd> टैग के बीच संलग्न होता है।

सिंटैक्स

<dl>
  <dt>परिभाषित पद</dt>
  <dd>पद का विवरण</dd>
  <dt>परिभाषित पद</dt>
  <dd>पद का विवरण</dd>
</dl>

उदाहरण

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    font-family: Arial, sans-serif;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
  ul, ol {
    margin-left: 2rem;
  }
  dl {
    margin-left: 2rem;
  }
  dt {
    font-weight: bold;
    margin-top: 1rem;
  }
  dd {
    margin-left: 1.5rem;
    color: #555;
  }
</style>
<body>
<h1>HTML सूचियाँ डेमो</h1>

<h2>अक्रमित सूची</h2>
<ul>
  <li>भौतिकी विषय</li>
  <li>रसायन विज्ञान विषय</li>
  <li>अर्थशास्त्र विषय</li>
</ul>

<h2>क्रमित सूची</h2>
<ol>
  <li>भौतिकी पुस्तक भाग 1</li>
  <li>भौतिकी पुस्तक भाग 2</li>
  <li>भौतिकी पुस्तक भाग 3</li>
</ol>

<h2>विवरण सूची</h2>
<dl>
  <dt>भौतिकी पुस्तक</dt>
  <dd>- इसमें आधुनिक भौतिकी और क्वांटम भौतिकी शामिल है</dd>
  <dt>रसायन विज्ञान पुस्तक</dt>
  <dd>- इसमें कार्बनिक, अकार्बनिक और भौतिक रसायन विज्ञान शामिल है</dd>
</dl>
</body>
</html>

आउटपुट

तीन प्रकार की सूचियाँ प्रदर्शित होंगी: बुलेट पॉइंट्स वाली अक्रमित सूची, संख्यांकित क्रमित सूची, और पद-विवरण जोड़े वाली विवरण सूची।

सूची स्टाइलिंग (CSS)

/* अक्रमित सूची मार्कर बदलें */
ul {
  list-style-type: square;  /* disc, circle, square, none */
}

/* क्रमित सूची संख्या शैली बदलें */
ol {
  list-style-type: upper-roman;  /* decimal, lower-alpha, upper-alpha, lower-roman, upper-roman */
}

/* कस्टम काउंटर */
ol {
  counter-reset: my-counter;
  list-style: none;
}
li::before {
  counter-increment: my-counter;
  content: "चरण " counter(my-counter) ": ";
  font-weight: bold;
}

नेस्टेड सूचियाँ

सूचियों को एक-दूसरे के अंदर नेस्ट किया जा सकता है:

<ul>
  <li>फल
    <ul>
      <li>सेब</li>
      <li>केला</li>
    </ul>
  </li>
  <li>सब्जियाँ</li>
</ul>

ब्राउज़र समर्थन

सभी ब्राउज़रों में पूर्ण समर्थन।