HTML अनियंत्रित सूचियाँ
HTML <ul>टैग एक अनियंत्रित (बुलेटेड) सूची को परिभाषित करता है।
अनियंत्रित HTML सूची
एक अनियंत्रित सूची <ul>टैग से शुरू होती है। प्रत्येक सूची आइटम
<li>टैग से शुरू होता है।
सूची आइटम को डिफ़ॉल्ट रूप से बुलेट (छोटे काले घेरे) से चिह्नित किया जाएगा:
उदाहरण
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
अनियंत्रित HTML सूची - सूची आइटम मार्कर चुनें
CSS list-style-typeसंपत्ति का उपयोग सूची आइटम मार्कर की शैली को परिभाषित करने के लिए किया जाता है। इसमें निम्न में से कोई एक मान हो सकता है:
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
उदाहरण - डिस्क
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
उदाहरण - वृत्त
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
उदाहरण - स्क्वायर
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
उदाहरण - कोई नहीं
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
नेस्टेड HTML सूचियाँ
सूचियों को नेस्टेड किया जा सकता है (सूची के अंदर सूची):
उदाहरण
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
नोट: एक सूची आइटम ( <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>
युक्ति: आप हमारे सीएसएस ट्यूटोरियल में सीएसएस के बारे में और जान सकते हैं ।
अध्याय का सारांश
<ul>एक अनियंत्रित सूची को परिभाषित करने के लिए HTML तत्व का प्रयोग करेंlist-style-typeसूची आइटम मार्कर को परिभाषित करने के लिए CSS गुण का उपयोग करें<li>सूची आइटम को परिभाषित करने के लिए HTML तत्व का उपयोग करें- सूचियों को नेस्टेड किया जा सकता है
- सूची आइटम में अन्य HTML तत्व हो सकते हैं
float:leftसूची को क्षैतिज रूप से प्रदर्शित करने के लिए CSS गुण का उपयोग करें
एचटीएमएल सूची टैग
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Describes the term in a description list |
सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएं ।