แท็ก HTML <dl>: รายการคำอธิบาย (Description List)

โครงสร้าง

• <dl> - Container ของรายการ
• <dt> (Description Term) - คำ/หัวข้อ/คีย์
• <dd> (Description Details) - คำอธิบาย/ค่า/รายละเอียด

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <h2>กีฬา</h2>
  <dl>
    <dt>ฟุตบอล</dt>
    <dd>เล่นโดย 250 ล้านคน ใน 200+ ประเทศ</dd>
    
    <dt>คริกเก็ต</dt>
    <dd>กีฬาแบท-ลูกบอล 2 ทีม ทีมละ 11 คน บนสนาม</dd>
    
    <dt>ฮอกกี้</dt>
    <dd>หลายประเภท: แบนดี้, ฮอกกี้สนาม, ไอซ์ฮอกกี้</dd>
    
    <dt>กอล์ฟ</dt>
    <dd>กีฬาคลับ-ลูกบอล ตีลูกเข้าหลุม ให้ทีน้อยที่สุด</dd>
  </dl>
</body>
</html>

ผลลัพธ์

แสดงรายการ คำ (dt) และคำอธิบาย (dd) โดย dd จะเยื้องเข้าไปจาก dt

ความสามารถของ <dd> ที่ <dt> ไม่มี

• ใส่ลิงก์ <a> ได้
• ใส่รูปภาพ <img> ได้
• ใส่ขึ้นบรรทัดใหม่ <br> ได้
• ใส่บล็อกอิลิเมนต์อื่นๆ ได้ (<p>, <ul>, <div> ฯลฯ)

กรณีใช้งานจริง (Use Cases)

• คำศัพท์/พจนานุกรม (Term + Definition)
• FAQ (Question + Answer)
• Metadata (Author: John, Date: 2024, Tags: HTML, CSS)
• Product Specs (RAM: 16GB, Storage: 512GB SSD)
• Dialog/Script (Speaker: Dialogue)

การจัดรูปแบบด้วย CSS

dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; }
dt { font-weight: bold; }
dd { margin: 0; }

/* หรือแบบคลาสสิก */
dt { float: left; width: 150px; font-weight: bold; }
dd { margin-left: 160px; }