एचटीएमएल ट्यूटोरियल

एचटीएमएल होम एचटीएमएल परिचय एचटीएमएल संपादक एचटीएमएल बेसिक एचटीएमएल तत्व एचटीएमएल गुण एचटीएमएल शीर्षक एचटीएमएल पैराग्राफ एचटीएमएल शैलियाँ एचटीएमएल स्वरूपण एचटीएमएल कोटेशन एचटीएमएल टिप्पणियाँ एचटीएमएल रंग एचटीएमएल सीएसएस एचटीएमएल लिंक एचटीएमएल छवियाँ एचटीएमएल फ़ेविकॉन एचटीएमएल टेबल्स एचटीएमएल सूचियां एचटीएमएल ब्लॉक और इनलाइन एचटीएमएल क्लासेस एचटीएमएल आईडी एचटीएमएल इफ्रेम्स एचटीएमएल जावास्क्रिप्ट HTML फ़ाइल पथ एचटीएमएल हेड एचटीएमएल लेआउट एचटीएमएल उत्तरदायी एचटीएमएल कंप्यूटर कोड HTML शब्दार्थ एचटीएमएल स्टाइल गाइड एचटीएमएल इकाइयां एचटीएमएल प्रतीक एचटीएमएल इमोजी एचटीएमएल वर्णसेट एचटीएमएल यूआरएल एनकोड एचटीएमएल बनाम एक्सएचटीएमएल

एचटीएमएल फॉर्म

एचटीएमएल फॉर्म एचटीएमएल फॉर्म गुण एचटीएमएल फॉर्म एलिमेंट्स एचटीएमएल इनपुट प्रकार एचटीएमएल इनपुट गुण HTML इनपुट फॉर्म विशेषताएँ

एचटीएमएल ग्राफिक्स

एचटीएमएल कैनवास एचटीएमएल एसवीजी

एचटीएमएल मीडिया

एचटीएमएल मीडिया एचटीएमएल वीडियो एचटीएमएल ऑडियो एचटीएमएल प्लग-इन एचटीएमएल यूट्यूब

एचटीएमएल एपीआई

एचटीएमएल जियोलोकेशन एचटीएमएल ड्रैग/ड्रॉप एचटीएमएल वेब स्टोरेज एचटीएमएल वेब वर्कर्स एचटीएमएल एसएसई

एचटीएमएल उदाहरण

एचटीएमएल उदाहरण एचटीएमएल प्रश्नोत्तरी एचटीएमएल व्यायाम एचटीएमएल प्रमाणपत्र एचटीएमएल सारांश एचटीएमएल अभिगम्यता

एचटीएमएल संदर्भ

एचटीएमएल टैग सूची एचटीएमएल गुण HTML वैश्विक गुण एचटीएमएल ब्राउज़र समर्थन एचटीएमएल घटनाक्रम एचटीएमएल रंग एचटीएमएल कैनवास एचटीएमएल ऑडियो/वीडियो एचटीएमएल सिद्धांत एचटीएमएल कैरेक्टर सेट एचटीएमएल यूआरएल एनकोड एचटीएमएल लैंग कोड HTTP संदेश HTTP तरीके पीएक्स से ईएम कन्वर्टर कुंजीपटल अल्प मार्ग

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 टैग संदर्भ पर जाएं ।