HTML <dl> ট্যাগ

HTML <dl> ট্যাগ (Description List)

<dl> (Description List) এলিমেন্ট HTML-এ একটি বিবরণ তালিকা (description list) ডিফাইন করতে ব্যবহৃত হয়। HTML5-এ এটি "description list" হিসেবে ডিফাইন করা হয়েছে (HTML4-এ "definition list")।

এতে তিনটি অংশ থাকে:

• <dl> — তালিকার কন্টেইনার
• <dt> (Description Term) — টার্ম/নাম
• <dd> (Description Details) — টার্মের বিবরণ/ব্যাখ্যা

উদাহরণ

<!DOCTYPE html>
<html>
<body>
  <h2>খেলাধুলা</h2>
  <dl>
    <dt>ফুটবল</dt>
    <dd>এটি ২০০+ দেশে ২৫ কোটি খেলোয়াড় দ্বারা খেলা হয়।</dd>
    <dt>ক্রিকেট</dt>
    <dd>এটি ব্যাট-বল গেম, দুটি ১১-সদস্যের দলের মধ্যে মাঠে খেলা হয়।</dd>
    <dt>হকি</dt>
    <dd>হকির অনেক ধরন আছে: ব্যান্ডি, ফিল্ড হকি, আইস হকি।</dd>
    <dt>গল্ফ</dt>
    <dd>এটি ক্লাব-বল স্পোর্ট যেখানে খেলোয়াড় विवিধ ক্লাব দিয়ে বল হোলে পাঠায়।</dd>
  </dl>
</body>
</html>

আউটপুট

ব্যাখ্যা

<dl>
  <dt>Football</dt>
  <dd>বিবরণ...</dd>
  <dt>Cricket</dt>
  <dd>বিবরণ...</dd>
  ...
</dl>

• <dt> — ডিফিনিশন তালিকার টার্ম (টার্ম/নাম)
• <dd> — টার্মের বিস্তারিত (লিংক, ইমেজ, লাইন ব্রেক যোগ করা যায়)

<dl> vs <ul> vs <table>

সেরা অনুশীলন

• একটি <dt>-র জন্য একাধিক <dd> থাকতে পারে (বহু অর্থ/ব্যাখ্যা)।
• <dd>-র ভিতরে ব্লক এলিমেন্ট (<p>, <ul>, <img>) রাখা যায়।
• CSS-এ: dt { font-weight: bold; } dd { margin-left: 1.5rem; margin-bottom: 1rem; }
• মাইক্রোডেটা: <dl itemscope itemtype="..."> দিয়ে স্ট্রাকচার্ড ডেটা যোগ করুন।