Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แท็ก dt: กำหนดคำศัพท์ในรายการนิยาม (Definition List)

แท็ก <dt> (Definition Term) ใช้ระบุ "คำศัพท์" หรือ "หัวข้อ" ในรายการนิยาม (<dl> - Description List) คู่กับ <dd> (Definition Description) ที่เป็นคำอธิบาย

โครงสร้างรายการนิยาม

<dl>
    <dt>คำศัพท์ 1</dt>
    <dd>คำอธิบายของคำศัพท์ 1</dd>
    
    <dt>คำศัพท์ 2</dt>
    <dd>คำอธิบายของคำศัพท์ 2</dd>
</dl>

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

<!DOCTYPE html>
<html>
<head>
    <title>ตัวอย่าง HTML dt Tag</title>
    <style>
        dt { font-weight: bold; margin-top: 1rem; }
        dd { margin-left: 1.5rem; color: #555; }
    </style>
</head>
<body>
    <dl>
        <dt>รายการนิยาม (Definition List)</dt>
        <dd>รายการที่ประกอบด้วยคำศัพท์และคำอธิบายของแต่ละคำ</dd>
        
        <dt>JAVA</dt>
        <dd>ภาษาโปรแกรมมิ่งเชิงวัตถุ ยอดนิยมสำหรับ Enterprise</dd>
        
        <dt>Android</dt>
        <dd>ระบบปฏิบัติการมือถือโอเพนซอร์ส พัฒนาโดย Google</dd>
    </dl>
</body>
</html>

การใช้งานขั้นสูง

  • หนึ่ง <dt> สามารถมีหลาย <dd> ได้ (หลายคำอธิบาย)
  • หลาย <dt> สามารถใช้ร่วม <dd> เดียวกันได้ (คำศัพท์ต่างกัน ความหมายเดียวกัน)
  • ใน HTML5 <dl> ใช้สำหรับ "Description List" (ก่อนหน้านี้ "Definition List")
  • เหมาะสำหรับ: คำศัพท์, FAQ, Metadata, คุณสมบัติสินค้า, รายละเอียดติดต่อ