HTML <dl> टैग: विवरण सूची परिभाषित करना

HTML <dl> टैग

<dl> एलिमेंट (डिस्क्रिप्शन लिस्ट / विवरण सूची) शब्द-परिभाषा जोड़े (term-description pairs) का एक समूह दर्शाता है। HTML5 में यह "विवरण सूची" है, HTML4 में "परिभाषा सूची" (definition list) कहलाता था।

संबंधित टैग्स

• <dt> (डेफिनिशन टर्म) - शब्द/नाम
• <dd> (डेफिनिशन डिस्क्रिप्शन) - विवरण/परिभाषा (लिंक्स, इमेजेज, लाइन ब्रेक्स शामिल कर सकते हैं)

उदाहरण: खेल विवरण सूची

<!DOCTYPE html>
<html>
<body>
  <h2>खेल</h2>
  <dl>
    <dt>फुटबॉल</dt>
    <dd>यह 200 से अधिक देशों में 250 मिलियन खिलाड़ियों द्वारा खेला जाता है।</dd>
    
    <dt>क्रिकेट</dt>
    <dd>यह एक बल्ले-गेंद का खेल है जो ग्यारह खिलाड़ियों की दो टीमों के बीच मैदान पर खेला जाता है।</dd>
    
    <dt>हॉकी</dt>
    <dd>हॉकी के कई प्रकार हैं जैसे बैंडी, फील्ड हॉकी, और आइस हॉकी।</dd>
    
    <dt>गोल्फ</dt>
    <dd>यह एक क्लब-गेंद खेल है जिसमें खिलाड़ी विभिन्न क्लब्स का उपयोग करके गेंदों को कोर्स पर छेदों में मारते हैं।</dd>
  </dl>
</body>
</html>

आउटपुट

शब्द (dt) और विवरण (dd) जोड़े, आमतौर पर dt बोल्ड/इंडेंटेड नहीं, dd इंडेंटेड।

कोड व्याख्या

<dl>
  <dt>फुटबॉल</dt>
  <dd>विवरण...</dd>
  <dt>क्रिकेट</dt>
  <dd>विवरण...</dd>
  ...
</dl>

<dt> vs <dd>

उपयोग के मामले

• शब्दकोश/शब्दावली
• FAQ (प्रश्न = dt, उत्तर = dd)
• मेटाडेटा सूचियाँ (लेखक: मान, दिनांक: मान)
• डायलॉग/स्क्रिप्ट (वक्ता: dt, संवाद: dd)
• उत्पाद विशिष्टताएँ

CSS स्टाइलिंग

dl { margin: 1em 0; }
dt { font-weight: bold; margin-top: 0.5em; }
dd { margin-left: 2em; margin-bottom: 0.5em; }