แท็ก HTML <dfn>: กำหนดคำศัพท์/คำจำกัดความครั้งแรก

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

<!DOCTYPE html>
<html>
<body>
  <h2>วิชาใน MCA</h2>
  <p><dfn title="Master of Computer Applications">MCA</dfn> 
     เป็นหลักสูตรปริญญาโทด้านคอมพิวเตอร์ ระยะเวลา 3 ปี</p>
  <p>วิชาเทอมแรกมีดังนี้...</p>
  <dl>
    <dt>JavaScript</dt> <dd>ภาษาสคริปติ้ง</dd>
    <dt>Java</dt> <dd>ภาษาโปรแกรมมิ่ง</dd>
    <dt>jQuery</dt> <dd>ไลบรารี JavaScript</dd>
    <dt>C#</dt> <dd>ภาษา OOP</dd>
  </dl>
</body>
</html>

ผลลัพธ์

คำว่า "MCA" จะแสดงเป็นตัวเอียง (Italic) โดยค่าเริ่มต้น และมี Tooltip แสดง title "Master of Computer Applications" เมื่อชี้เมาส์

แอตทริบิวต์ title

ใช้ title ร่วมกับ <dfn> เพื่อให้คำจำกัดความเต็มรูปแบบ:

<dfn title="HyperText Markup Language">HTML</dfn>

รูปแบบแนะนำ (HTML5 Best Practice)

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> 
   เป็นภาษามาร์กอัพมาตรฐานสำหรับสร้างหน้าเว็บ</p>

ความแตกต่าง <dfn> vs <abbr> vs <cite>

จุดสำคัญ

• <dfn> ใช้ได้ครั้งเดียวต่อคำศัพท์ในเอกสาร (First Occurrence)
• มักใช้ร่วมกับ <abbr> สำหรับคำย่อ
• ช่วย SEO เข้าใจโครงสร้างความรู้ (Knowledge Graph)
• Accessibility: Screen Reader อาจอ่าน title attribute
• รองรับ Global Attributes (class, id, style, data-*, ฯลฯ)