หมวดหมู่: Programming

ในโลกของการพัฒนาเว็บยุคใหม่ เรามักเห็นการใช้ <div>, <ul>, หรือ <table> ในการแสดงผลข้อมูลแบบคู่ (Key-Value) กันจนชินตา ทั้งที่จริงแล้ว HTML มีแท็กเฉพาะทางที่ถูกออกแบบมาเพื่องานนี้โดยตรง นั่นคือ <dl> (Description List), <dt> (Description Term) และ <dd> (Description Details)

บทความนี้จะพาไปดูว่าทำไมแท็กกลุ่มนี้ถึงถูกมองข้าม และทำไมในยุคปัจจุบันถึงเวลาที่เราควรหยิบมันกลับมาใช้ให้ถูกต้อง

ทำไมในอดีตถึงไม่นิยมใช้?

1. ภาพจำเรื่องความยุ่งยากในการจัด Layout (CSS) ในยุค HTML4 จนถึงก่อน HTML5.2 มาตรฐานไม่อนุญาตให้ใส่แท็ก <div> เข้าไปครอบระหว่างคู่ <dt> และ <dd>ทำให้การจัด Layout แบบ 2 คอลัมน์ (เช่น คำศัพท์อยู่ซ้าย คำอธิบายอยู่ขวา) หรือการทำ Responsive เป็นเรื่องที่ต้องเขียน CSS ท่าพิสดารอย่างมาก
2. ความเข้าใจผิดเรื่องความหมาย (Definition vs Description) แต่เดิม <dl> ย่อมาจาก Definition List ทำให้นักพัฒนาคิดว่าใช้ได้เฉพาะงานพจนานุกรมหรืออภิธานศัพท์เท่านั้น แม้ว่า W3C จะเปลี่ยนนิยามเป็น Description List (Association List หรือ Name-Value pairs) เพื่อรองรับข้อมูลประเภท Metadata, รายละเอียดสินค้า หรือ FAQ มานานแล้ว แต่ภาพจำเดิมยังคงอยู่
3. การรองรับของ Screen Reader ในอดีต โปรแกรมอ่านหน้าจอ (Screen Reader) ในยุคก่อนๆ ประมวลผลกลุ่มแท็ก <dl> ได้ไม่ราบรื่นเท่า <ul> หรือ <table> บางตัวไม่อ่านจำนวนรายการทั้งหมดให้ผู้ใช้ทราบ นักพัฒนาที่เน้นเรื่อง Accessibility จึงมักเลี่ยงไปใช้แท็กอื่นแทน

ทำไมถึง “ควรเปลี่ยนกลับมาใช้” ในปัจจุบัน?

1. HTML5.2 อนุญาตให้ใช้ <div> ครอบได้แล้ว
   มาตรฐาน HTML5.2 ได้ปลดล็อกข้อจำกัดสำคัญ โดยอนุญาตให้เขียนโครงสร้างแบบนี้ได้ถูกต้องตามมาตรฐาน

   <dl class="grid gap-4">
     <div class="flex justify-between">
       <dt class="font-bold">สถานะคำสั่งซื้อ:</dt>
       <dd>จัดส่งสำเร็จ</dd>
     </div>
     <div class="flex justify-between">
       <dt class="font-bold">ยอดรวม:</dt>
       <dd>฿1,250</dd>
     </div>
   </dl>
   

   การจัด Layout ด้วย Flexbox, Grid หรือ Utility Classes ยุคใหม่อย่าง Tailwind CSS จึงทำได้อย่างอิสระโดยไม่เสียโครงสร้าง Semantic
2. Semantic และ Accessibility ที่ถูกต้องสำหรับคู่ Key-Value
   การใช้ <div> ล้วนๆ จะทำให้เบราว์เซอร์และ Screen Reader ไม่เข้าใจความสัมพันธ์ของข้อมูล แต่ <dl> จะระบุชัดเจนว่าข้อความใน <dt> คือหัวข้อ (Name/Key) และ <dd> คือรายละเอียดที่ผูกติดกัน (Value) ซึ่งระบบ Accessibility สมัยใหม่รองรับได้อย่างสมบูรณ์
3. Semantic และ Accessibility ที่ถูกต้องสำหรับคู่ Key-Value
   การใช้ <div> ล้วนๆ จะทำให้เบราว์เซอร์และ Screen Reader ไม่เข้าใจความสัมพันธ์ของข้อมูล แต่ <dl> จะระบุชัดเจนว่าข้อความใน <dt> คือหัวข้อ (Name/Key) และ <dd> คือรายละเอียดที่ผูกติดกัน (Value) ซึ่งระบบ Accessibility สมัยใหม่รองรับได้อย่างสมบูรณ์

สถานการณ์ที่ควรใช้ <dl> แทน <div> หรือ <table>

• ข้อมูล Metadata หรือ Spec สินค้า
  เช่น ขนาด, น้ำหนัก, สี, ยี่ห้อ
• สรุปรายการคำสั่งซื้อ / ใบเสร็จ
  เช่น ข้อมูลผู้ซื้อ, ที่อยู่จัดส่ง, ยอดสุทธิ
• หน้าคำถามที่พบบ่อย (FAQ)
  <dt> แทนคำถาม และ <dd> แทนคำตอบ
• พจนานุกรม หรือ Glossary
  คำศัพท์และคำอธิบายความหมาย

การหันกลับมาใช้ <dl>, <dt>, <dd> ในจุดที่เหมาะสม นอกจากจะช่วยลดการใช้ <div> เกินความจำเป็น (Div Soup) แล้ว ยังช่วยให้โค้ดสะอาด มีโครงสร้างที่สื่อความหมายชัดเจน และเป็นมิตรต่อผู้ใช้งานทุกกลุ่มอย่างแท้จริง