HTML अन्य Lists / Description Lists

bullets और numbers से आगे, HTML के पास एक बहुत specific काम के लिए बना तीसरा list type है: किसी term को उसकी definition या description के साथ pair करना, जैसे कोई glossary entry या metadata labels का set उनके values के बगल में। description list (<dl>) हर term के लिए <dt> का उपयोग करती है और उसके corresponding description के लिए <dd> का, जो उस term-value relationship को generic divs के साथ नकली बनाने के बजाय असली semantic meaning देती है।

In this page:

एक बुनियादी Description List बनाना
एक Term के साथ कई Descriptions
एक Description Share करने वाले कई Terms
Metadata के लिए Description Lists का उपयोग
CSS के साथ Description Lists को Style करना

Syntax

markup

<dl>
  <dt>Term</dt>
  <dd>Description</dd>
</dl>

एक बुनियादी Description List बनाना

<dl> पूरी list को लपेटता है, <dt> (description term) उस term को mark करता है जिसे define किया जा रहा है, और <dd> (description details) उसकी definition को mark करता है -- ब्राउज़र default रूप से dd content को indent करते हैं, term को उसके explanation से visually अलग करते हुए।

Note: dl का उपयोग specifically तब करें जब content वाकई term-value pair हो, जैसे कोई glossary शब्द और उसका अर्थ, किसी arbitrary two-column layout के लिए नहीं।

Warning: dt और dd दोनों को dl का direct children होना चाहिए; उन्हें किसी extra div में wrap करना description list के semantic structure को तोड़ देता है।

उदाहरण: Creating a Basic Description List

markup

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

एक Term के साथ कई Descriptions

किसी term के कई अलग meanings, synonyms, या values होने पर एक single <dt> के बाद एक से ज़्यादा <dd> element आ सकते हैं -- हर dd को उसी term के लिए dt दोहराए बिना एक अलग description के रूप में announce किया जाता है।

Note: एक dt के नीचे कई अलग meanings वाले terms के लिए कई dd elements का उपयोग करें, बजाय इसके कि उन्हें commas से अलग करके एक dd में भर दिया जाए।

Warning: कई dd elements सिर्फ उनसे तुरंत पहले वाले single dt पर लागू होते हैं; एक नया dt describe किए जा रहे term को reset कर देता है।

उदाहरण: One Term with Multiple Descriptions

markup

<dl>
  <dt>Bank</dt>
  <dd>A financial institution</dd>
  <dd>The edge of a river</dd>
</dl>

एक Description Share करने वाले कई Terms

इसके उलट, एक single <dd> से पहले एक से ज़्यादा <dt> लगातार आ सकते हैं, जिसका मतलब है कि एक description सभी पूर्ववर्ती terms पर समान रूप से लागू होता है -- यह तब उपयोगी है जब कई related terms बिल्कुल एक जैसी definition share करते हों।

Note: एक ही description text को हर एक के लिए अलग-अलग दोहराने के बजाय सच में synonymous terms को एक shared dd के नीचे group करें।

Warning: बिना dd के लगातार dt elements तभी valid हैं जब वे genuinely एक ही following description को share करने के लिए बने हों।

उदाहरण: Multiple Terms Sharing One Description

markup

<dl>
  <dt>Big</dt>
  <dt>Large</dt>
  <dd>Of considerable size</dd>
</dl>

Metadata के लिए Description Lists का उपयोग

glossaries से परे, description lists किसी भी label-value pairing के लिए semantically सही choice हैं, जैसे किसी product का metadata (SKU, weight, dimensions) या किसी person की profile details (name, role, location) दिखाना, जहां हर label स्पष्ट रूप से एक specific value से मेल खाता हो।

Note: जब भी content मूल रूप से labeled values की एक list हो, table या divs की एक series के बजाय dl चुनें, क्योंकि यह ज़्यादा accessible semantic अर्थ रखता है।

Warning: dl का उपयोग ऐसे content के लिए करना जो असल में label-value relationship नहीं है, सिर्फ इसकी default indentation styling पाने के लिए, element के semantics का misuse करता है।

उदाहरण: Using Description Lists for Metadata

markup

<dl>
  <dt>SKU</dt>
  <dd>A1234</dd>
  <dt>Weight</dt>
  <dd>2kg</dd>
</dl>

CSS के साथ Description Lists को Style करना

By default, dd अपने dt से ब्राउज़र के default margin से indent होता है, लेकिन CSS एक description list को two-column grid layout, एक compact inline FAQ format, या underlying term-description semantics को बनाए रखते हुए किसी अन्य visual arrangement में restyle करने की पूरी क्षमता देता है।

Note: बड़े metadata lists के लिए terms और descriptions को एक clean two-column layout में align करने के लिए dl element पर CSS Grid का उपयोग करें।

Warning: dd पर default margin हटाना बिना नई spacing जोड़े terms और उनकी descriptions को visually cramped दिखा सकता है।

उदाहरण: Styling Description Lists with CSS

markup

<style>
  dl {
    display: grid;
    grid-template-columns: 100px 1fr;
  }
</style>
<dl>
  <dt>Name</dt>
  <dd>Alex</dd>
</dl>

Live Example

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Ordered Lists Next Lesson → HTML Block & Inline

HTML अन्य Lists / Description Lists

एक बुनियादी Description List बनाना

एक Term के साथ कई Descriptions

एक Description Share करने वाले कई Terms

Metadata के लिए Description Lists का उपयोग

CSS के साथ Description Lists को Style करना

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code