<dfn> (definition) tag ใน HTML5 ถูกใช้เพื่อระบุว่าคำหรือวลีที่อยู่ภายในแท็กนั้นเป็นคำศัพท์หรือคำที่กำลังถูกนิยามหรืออธิบาย โดยทั่วไปมักใช้ในบทความที่อธิบายคำเฉพาะทางหรือเทคนิคต่าง ๆ การใช้แท็กนี้ช่วยเพิ่มความหมายทางเชิงโครงสร้าง (semantic) ให้กับเอกสาร HTML ซึ่งมีประโยชน์สำหรับเครื่องมือค้นหาและเครื่องมือช่วยเหลือสำหรับการเข้าถึง (เช่น โปรแกรมอ่านหน้าจอ)
การใช้งานทั่วไป
แท็ก <dfn> สามารถใช้งานได้หลายรูปแบบ ขึ้นอยู่กับบริบทของเนื้อหาที่เราต้องการสร้าง
ตัวอย่าง 1: การใช้งานพื้นฐาน
ในตัวอย่างนี้ <dfn> ใช้เพื่อระบุคำศัพท์ที่กำลังนิยาม
<p><dfn>HTML</dfn> stands for HyperText Markup Language.</p>ในตัวอย่างนี้คำว่า “HTML” เป็นคำที่ถูกนิยาม จากนั้นอธิบายต่อว่า HTML ย่อมาจากอะไร
ตัวอย่าง 2: การใช้งานร่วมกับ title attribute
เราสามารถใช้แอตทริบิวต์ title เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับคำศัพท์ที่นิยาม
<p>The <dfn title="Cascading Style Sheets">CSS</dfn> defines how HTML elements are displayed.</p>เมื่อผู้อ่านเลื่อนเมาส์ไปที่คำว่า “CSS” ข้อความที่แสดงใน title จะปรากฏขึ้น (คือ “Cascading Style Sheets”)
ตัวอย่าง 3: การเชื่อมโยงกับคำอธิบายที่ชัดเจน
บางครั้งเราอาจต้องการให้คำศัพท์หรือคำที่นิยามเชื่อมโยงกับส่วนที่อธิบายเพิ่มเติม
<p>The term <dfn id="http">HTTP</dfn> is widely used on the internet.</p>
<p><strong>HTTP</strong>: <a href="#http">HyperText Transfer Protocol</a> is the foundation of data communication on the web.</p>ในตัวอย่างนี้ <dfn> มีการกำหนดค่า id เพื่อให้สามารถเชื่อมโยงกับลิงก์ในส่วนที่อธิบายได้ง่าย
ตัวอย่าง 4: การใช้งานกับหลายคำหรือวลี
แท็ก <dfn> สามารถครอบคลุมได้มากกว่าหนึ่งคำในกรณีที่เป็นการนิยามคำหลายคำหรือวลี
<p>The <dfn>World Wide Web</dfn> is often referred to simply as the web.</p>ในตัวอย่างนี้ “World Wide Web” เป็นวลีที่ถูกนิยามภายใน <dfn>
ตัวอย่าง 5: การใช้ร่วมกับ <abbr> (คำย่อ)
เราสามารถใช้ <dfn> ร่วมกับ <abbr> (คำย่อ) เพื่ออธิบายคำที่ย่อ
<p>The term <dfn><abbr title="Application Programming Interface">API</abbr></dfn> is widely used in software development.</p>ในตัวอย่างนี้คำว่า “API” ถูกนิยามภายใน <dfn> และอธิบายความหมายของคำย่อด้วยแท็ก <abbr>
ประโยชน์ของ <dfn> Tag
- เพิ่มความหมายเชิงโครงสร้าง: แท็กนี้ช่วยทำให้ HTML มีโครงสร้างที่ชัดเจนและเข้าใจง่ายมากขึ้นสำหรับเครื่องมือค้นหาและเครื่องมือช่วยเหลือ
- รองรับการเข้าถึง: ช่วยให้ผู้ใช้ที่มีความบกพร่องทางการมองเห็นสามารถเข้าใจคำศัพท์ที่สำคัญผ่านโปรแกรมอ่านหน้าจอ
- ช่วยในเรื่อง SEO: เพิ่มการมองเห็นของคำศัพท์ในเอกสารสำหรับเครื่องมือค้นหา
สรุป
การใช้ <dfn> ช่วยให้เนื้อหาของเรามีความชัดเจนและโครงสร้างที่ดีขึ้น โดยเฉพาะอย่างยิ่งเมื่อต้องการนิยามคำศัพท์ที่เฉพาะเจาะจง