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

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

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

การใช้งาน <dd> ในรูปแบบต่าง ๆ

การใช้งานพื้นฐาน ตัวอย่างการใช้งานเบื้องต้นของ <dl>, <dt>, และ <dd>

HTML
<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

ในตัวอย่างนี้ <dt> ใช้แสดงคำศัพท์ หรือหัวข้อที่ต้องการอธิบาย (HTML, CSS) และ <dd> ใช้อธิบายความหมายหรือคำอธิบายเพิ่มเติม

หลาย <dd> สำหรับหนึ่ง <dt> เราสามารถใช้งาน <dd> หลาย ๆ รายการเพื่ออธิบาย <dt> เดียวได้

HTML
<dl>
  <dt>JavaScript</dt>
  <dd>Programming language of the web</dd>
  <dd>Can be used for both front-end and back-end development</dd>
</dl>

ตัวอย่างนี้แสดงให้เห็นว่ามีคำอธิบายหลายคำสำหรับ JavaScript หนึ่งคำศัพท์

การใช้หลาย <dt> กับ <dd> เดียว ในบางกรณี สามารถใช้คำศัพท์หลาย ๆ คำที่มีคำอธิบายเดียวกันได้

HTML
<dl>
  <dt>HTTP</dt>
  <dt>HTTPS</dt>
  <dd>Protocols used to transfer data over the web</dd>
</dl>

ในกรณีนี้คำศัพท์ HTTP และ HTTPS มีคำอธิบายเดียวกัน

การจัดรูปแบบ <dd> ด้วย CSS แท็ก <dd> สามารถจัดรูปแบบเพิ่มเติมด้วย CSS เพื่อให้ดูเป็นระเบียบมากขึ้น

HTML
<style>
  dd {
    margin-left: 20px;
    font-style: italic;
  }
</style>

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

ในตัวอย่างนี้คำอธิบายใน <dd> จะถูกจัดให้อยู่ในรูปแบบตัวเอียงและเยื้องไปทางขวาเล็กน้อย

การใช้งานร่วมกับข้อมูลโครงสร้าง (Structured Data) สามารถใช้ <dl>, <dt>, และ <dd> ในการแสดงข้อมูลโครงสร้าง เช่น ข้อมูลความรู้ หรือข้อมูลตาราง

HTML
<dl>
  <dt>Product Name:</dt>
  <dd>Wireless Headphones</dd>

  <dt>Price:</dt>
  <dd>$99.99</dd>

  <dt>Features:</dt>
  <dd>Bluetooth, Noise-cancelling, 20 hours battery life</dd>
</dl>

การใช้รูปแบบนี้เป็นประโยชน์เมื่อสร้างรายละเอียดของผลิตภัณฑ์หรือข้อมูลที่ต้องการอธิบายเพิ่มเติม

การใช้ <dl> ซ้อนกัน สามารถใช้ <dl> ซ้อนกันเพื่อสร้างคำอธิบายที่มีรายละเอียดหรือโครงสร้างที่ซับซ้อน

HTML
<dl>
  <dt>Frontend</dt>
  <dd>
    <dl>
      <dt>HTML</dt>
      <dd>Markup language for creating web pages</dd>
      
      <dt>CSS</dt>
      <dd>Style sheet language for designing web pages</dd>
    </dl>
  </dd>
  
  <dt>Backend</dt>
  <dd>
    <dl>
      <dt>Node.js</dt>
      <dd>JavaScript runtime for building server-side applications</dd>
    </dl>
  </dd>
</dl>

ในตัวอย่างนี้ <dd> แต่ละรายการมีรายการอธิบายที่ซ้อนกันอีกชั้น ทำให้สามารถสร้างโครงสร้างข้อมูลที่มีหลายระดับได้

สรุป

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

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

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