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

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

แท็ก <dl> ใน HTML5 ใช้สำหรับสร้าง Description List หรือรายการที่ใช้ในการจับคู่ระหว่างคำศัพท์และคำอธิบาย แท็กนี้เหมาะสำหรับแสดงข้อมูลที่มีความสัมพันธ์แบบ “คำศัพท์-คำอธิบาย” โดยมีการใช้แท็กย่อยสองชนิด ได้แก่

  • <dt> (Description Term) คือ คำหรือคำศัพท์ที่ต้องการอธิบาย
  • <dd> (Description Definition) คือ คำอธิบายของคำศัพท์นั้น ๆ

โครงสร้างพื้นฐาน

HTML
<dl>
  <dt>คำศัพท์หรือหัวข้อที่ต้องการอธิบาย</dt>
  <dd>คำอธิบายของคำศัพท์หรือหัวข้อนั้น ๆ</dd>
</dl>

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

HTML
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language เป็นภาษาสำหรับสร้างเว็บเพจ</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets ใช้ในการตกแต่งเว็บเพจ</dd>
  
  <dt>JavaScript</dt>
  <dd>ภาษาสคริปต์ที่ใช้ในการเพิ่มความโต้ตอบให้กับเว็บเพจ</dd>
</dl>

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

ใช้หลาย ๆ คำศัพท์กับคำอธิบายเดียวกัน

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

HTML
<dl>
  <dt>HTML</dt>
  <dt>CSS</dt>
  <dt>JavaScript</dt>
  <dd>เป็นภาษาที่ใช้ในการพัฒนาเว็บไซต์</dd>
</dl>

คำศัพท์หนึ่งมีหลายคำอธิบาย

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

HTML
<dl>
  <dt>HTML</dt>
  <dd>ภาษาในการสร้างโครงสร้างของเว็บเพจ</dd>
  <dd>ใช้ร่วมกับ CSS และ JavaScript ในการพัฒนาเว็บไซต์</dd>
</dl>

การซ้อนรายการคำศัพท์

ถ้าต้องการสร้างรายการคำศัพท์ที่มีความซับซ้อน เราสามารถซ้อนรายการใน <dd> ได้ เช่น

HTML
<dl>
  <dt>Web Development</dt>
  <dd>
    <dl>
      <dt>Frontend</dt>
      <dd>การพัฒนา UI/UX ที่ผู้ใช้เห็นและโต้ตอบ</dd>
      
      <dt>Backend</dt>
      <dd>การพัฒนาระบบเซิร์ฟเวอร์และฐานข้อมูล</dd>
    </dl>
  </dd>
</dl>

การใช้กับข้อมูลเชิงสถิติหรือรายละเอียด

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

HTML
<dl>
  <dt>จำนวนประชากร</dt>
  <dd>ประเทศไทย: 70 ล้านคน</dd>
  <dd>สหรัฐอเมริกา: 331 ล้านคน</dd>
  
  <dt>GDP</dt>
  <dd>ประเทศไทย: $543.5 พันล้านดอลลาร์</dd>
  <dd>สหรัฐอเมริกา: $21.43 ล้านล้านดอลลาร์</dd>
</dl>

สรุป

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

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

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