HTML Unordered Lists

HTML अव्यवस्थित सूचियाँ

HTML अव्यवस्थित सूचियाँ

HTML <ul> टैग एक अव्यवस्थित (गोलियों के साथ) सूची को परिभाषित करता है।

एक अव्यवस्थित HTML सूची

एक अव्यवस्थित सूची <ul> टैग से शुरू होती है। प्रत्येक सूची आइटम <li> टैग से शुरू होता है।

डिफ़ॉल्ट रूप से सूची आइटम को गोलियों (छोटे काले घेरे) से चिह्नित किया जाता है:

उदाहरण

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

अव्यवस्थित HTML सूची - सूची उपकडीएम मार्कर का चयन करें

सीएसएस सूची-शैली-प्रकार विशेषता का उपयोग सूची तत्व मार्कर की शैली को परिभाषित करने के लिए किया जाता है। इसमें निम्नलिखित में से एक मान हो सकता है:

कीमत व्याख्या
disc सूची उरुपकदम मार्कर को बम (डिफ़ॉल्ट) पर सेट करता है।
circle सूची उरुपकदम मार्कर को वृत्त पर सेट करता है
square सूची उरुपकदम मार्कर को वर्गाकार पर सेट करता है
none सूची आइटम चिह्नित नहीं किए जाएंगे

Disc

उदाहरण - डिस्क

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

Circle

उदाहरण - वृत्त

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

Square

उदाहरण - वर्ग

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

No List Marker

उदाहरण - कोई नहीं

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

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

सूचियाँ नेस्ट की जा सकती हैं (सूची के भीतर सूची):

उदाहरण

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

📝नोट:

एक सूची तत्व (<li>) में नई सूची और अन्य HTML तत्व, जैसे चित्र और लिंक शामिल हो सकते हैं।

सीएसएस के साथ क्षैतिज सूची

HTML सूचियों को CSS के साथ कई अलग-अलग तरीकों से स्टाइल किया जा सकता है।

नेविगेशन मेनू बनाने के लिए किसी सूची को क्षैतिज रूप से स्टाइल करना एक लोकप्रिय तरीका है:

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

💡सहायता नोट:

सीएसएस के बारे में अधिक जानने के लिए हमारा सीएसएस ट्यूटोरियल देखें।

अध्याय का सारांश

अभ्यास

❓अव्यवस्थित सूचियों के सूची मार्कर की शैली को परिभाषित करते समय उपयोग करने के लिए सही सीएसएस विशेषता क्या है?

list-style-type
✓ ठीक है! सूची-शैली-प्रकार विशेषता का उपयोग सूची मार्कर की शैली को परिभाषित करने के लिए किया जाता है
style-type-list
✗ ग़लत! शैली-प्रकार-सूची मान्य CSS विशेषता नहीं है
type-list-style
✗ ग़लत! टाइप-लिस्ट-स्टाइल मान्य सीएसएस विशेषता नहीं है

HTML सूची टैग

टैग व्याख्या
<ul> एक अव्यवस्थित सूची को परिभाषित करता है
<ol> एक आदेशित सूची को परिभाषित करता है
<li> एक सूची उरुपकदम को परिभाषित करती है
<dl> विवरण सूची को परिभाषित करता है
<dt> डिस्क्रिप्टर सूची में एक शब्द को परिभाषित करता है
<dd> शब्दावली में शब्द का वर्णन करता है

सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएँ।