พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน dt Tag

แท็ก <dt> ใน HTML5 เป็นส่วนหนึ่งของการสร้างรายการคำศัพท์ (Description List) ซึ่งใช้งานคู่กับแท็ก <dl> (Description List) และ <dd> (Description Definition) โดยแท็ก <dt> ใช้กำหนดรายการคำศัพท์หรือหัวข้อ ส่วนแท็ก <dd> ใช้กำหนดคำอธิบายหรือรายละเอียดของคำศัพท์หรือหัวข้อที่ระบุในแท็ก <dt>

การใช้งานพื้นฐาน

แท็ก <dt> จะถูกใช้ร่วมกับ <dl> และ <dd> ในการสร้างรายการคำศัพท์และคำอธิบายดังนี้

HTML
<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>

  <dt>JavaScript</dt>
  <dd>Programming language for web development</dd>
</dl>
  • <dl> เป็นแท็กหลักที่ครอบรายการทั้งหมด
  • <dt> กำหนดคำศัพท์หรือหัวข้อ
  • <dd> เป็นคำอธิบายของคำศัพท์หรือหัวข้อที่ระบุใน <dt>

รูปแบบการประยุกต์ใช้งาน

การใช้ <dt> และ <dd> หลายรายการใน <dl> เดียวกัน

ในบางกรณี หนึ่งคำศัพท์อาจมีคำอธิบายหลายคำอธิบายได้ ดังนี้

HTML
<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dd>The standard markup language for documents on the web</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dd>A stylesheet language used for describing the presentation of a document</dd>
</dl>

การสร้างกลุ่มคำศัพท์และคำอธิบายหลายกลุ่ม

เราสามารถจัดกลุ่มคำศัพท์และคำอธิบายหลายกลุ่มใน <dl> เดียวได้ ดังนี้

HTML
<dl>
  <dt>Frontend Technologies</dt>
  <dd>HTML, CSS, JavaScript</dd>

  <dt>Backend Technologies</dt>
  <dd>Node.js, Python, Ruby</dd>
</dl>

ในตัวอย่างนี้ <dt> ใช้กำหนดกลุ่ม เช่น “Frontend Technologies” และ “Backend Technologies” โดยใช้ <dd> เป็นคำอธิบายกลุ่มที่ประกอบด้วยเทคโนโลยีต่าง ๆ

การใช้ <dt> ร่วมกับการจัดรูปแบบด้วย CSS

เราสามารถใช้ CSS เพื่อปรับแต่งรูปแบบของ <dt> และ <dd> เช่น การปรับขนาดตัวอักษรหรือการจัดวางดังนี้

HTML
<style>
  dl {
    width: 300px;
  }
  dt {
    font-weight: bold;
    color: #2c3e50;
  }
  dd {
    margin-left: 20px;
    color: #34495e;
  }
</style>

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>

  <dt>JavaScript</dt>
  <dd>Programming language for web development</dd>
</dl>

สรุป

แท็ก <dt> ใน HTML5 เป็นแท็กที่ใช้สำหรับการระบุคำศัพท์หรือหัวข้อในรายการคำอธิบาย เมื่อใช้งานร่วมกับแท็ก <dd> และ <dl> สามารถนำไปประยุกต์ใช้งานได้หลากหลาย ไม่ว่าจะเป็นการสร้างรายการคำศัพท์พื้นฐาน การสร้างกลุ่มคำอธิบาย หรือการปรับแต่งการแสดงผลด้วย CSS

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ