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