Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> HTML

HTML लिस्ट्स (
    ,
      ,
      ) का उपयोग कैसे करें

HTML में 3 प्रकार के लिस्ट एलिमेंट्स होते हैं:

  • अनऑर्डर्ड लिस्ट्स (सबसे आम)
  • ऑर्डर्ड लिस्ट्स
  • डिस्क्रिप्शन लिस्ट्स

अनऑर्डर्ड लिस्ट्स

अनऑर्डर्ड लिस्ट्स को <ul> एलिमेंट से परिभाषित किया जाता है और अंदर प्रत्येक लिस्ट आइटम को <li> एलिमेंट से परिभाषित किया जाता है:

<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>

परिणाम:

  • Apple
  • Banana
  • Orange

डिफ़ॉल्ट रूप से, अनऑर्डर्ड लिस्ट्स को सर्कल बुलेट पॉइंट के साथ स्टाइल किया जाता है, लेकिन इसे CSS से कस्टमाइज़ किया जा सकता है।

ऑर्डर्ड लिस्ट्स

ऑर्डर्ड लिस्ट्स को <ol> एलिमेंट से परिभाषित किया जाता है और अंदर प्रत्येक लिस्ट आइटम को <li> एलिमेंट से परिभाषित किया जाता है:

<ol> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ol>

परिणाम:

  1. Apple
  2. Banana
  3. Orange

डिफ़ॉल्ट रूप से, ऑर्डर्ड लिस्ट्स न्यूमेरिकली प्रदर्शित होती हैं, लेकिन इसे CSS से कस्टमाइज़ किया जा सकता है।

डिस्क्रिप्शन लिस्ट्स

डिस्क्रिप्शन लिस्ट्स ऑर्डर्ड और अनऑर्डर्ड लिस्ट्स से काफी अलग तरीके से काम करती हैं।

यहां बताया गया है कि वे कैसे काम करती हैं:

  • <dl> एलिमेंट एक डिस्क्रिप्शन लिस्ट को परिभाषित करता है (और पैरेंट एलिमेंट है)।
  • <dt> एलिमेंट एक डिस्क्रिप्शन लिस्ट के अंदर टर्म्स (नाम) को परिभाषित करता है (और <dl> एलिमेंट का चाइल्ड है)।
  • <dd> एलिमेंट उस डिस्क्रिप्शन लिस्ट टर्म (<dt>) के लिए विवरण, परिभाषा, या मान प्रदान करता है जो ठीक उससे पहले आया था (और यह भी <dl> एलिमेंट का चाइल्ड है)।

उदाहरण:

<dl> <dt>African Elephant</dt> <dd>दुनिया का सबसे बड़ा जीवित भूमि जानवर।</dd> <dt>Giraffe</dt> <dd>पृथ्वी पर सबसे लंबा जीवित जानवर।</dd> <dt>Blue Whale</dt> <dd>अब तक का सबसे बड़ा जानवर (जितना हम जानते हैं)।</dd> </dl>

परिणाम:

African Elephant
दुनिया का सबसे बड़ा जीवित भूमि जानवर।
Giraffe
पृथ्वी पर सबसे लंबा जीवित जानवर।
Blue Whale
अब तक का सबसे बड़ा जानवर (जितना हम जानते हैं)।

डिस्क्रिप्शन लिस्ट्स आधुनिक HTML में शायद ही कभी उपयोग की जाती हैं। सबसे आम उपयोग का मामला जो मैंने देखा है वह किसी प्रकार की ग्लॉसरी बनाने या मेटाडेटा प्रदर्शित करने के लिए है — हालांकि, HTML में ऐसा करने के कई अन्य तरीके हैं।

  1. HTML में ब्लॉककोट (<blockquote>) का उपयोग कैसे करें? HTML में ब्लॉककोट (<blockquote>) का उपयोग कैसे करें?

    लंबी कोटेशन के लिए <blockquote> टैग लंबी कोटेशन (उद्धरण) दर्शाने के लिए उपयोग होता है। इसमें केवल ब्लॉक-लेवल एलिमेंट्स होने चाहिए, सादा टेक्स्ट नहीं। इसका cite एट्रिब्यूट कोटेशन के स्रोत का URL बताता है। उदाहरण <!DOCTYPE html> <html> <head> <title>HTML blockquot

  1. HTML में कोटेशन मार्क्स (<q>) का उपयोग कैसे करें? HTML में कोटेशन मार्क्स (<q>) का उपयोग कैसे करें?

    छोटी कोटेशन के लिए <q> टैग छोटी कोटेशन (उद्धरण) के लिए उपयोग होता है। यदि कोटेशन कई लाइनों की है तो <blockquote> उपयोग करें। ब्राउज़र स्वचालित रूप से <q> एलिमेंट के चारों ओर कोटेशन मार्क्स लगा देते हैं। cite एट्रिब्यूट से कोटेशन के स्रोत का URL दे सकते हैं। उदाहरण <!DOCTYPE h

  1. HTML में इमेज को लिंक की तरह कैसे उपयोग करें? HTML में इमेज को लिंक की तरह कैसे उपयोग करें?

    <img> को <a> के अंदर रखें इमेज को लिंक बनाने के लिए <img> टैग को <a> टैग के अंदर रखें जिसमें href एट्रिब्यूट हो। src में इमेज URL, width/height में आकार दें। उदाहरण <!DOCTYPE html> <html> <head> <title>HTML Image as link</title> </head>