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

ใน HTML5 แท็ก <data> ถูกใช้งานเพื่อเชื่อมโยงข้อมูลที่สามารถอ่านได้โดยมนุษย์กับข้อมูลในรูปแบบที่เครื่องสามารถอ่านได้ แท็กนี้มีประโยชน์เมื่อเราต้องการแสดงผลข้อมูลที่มนุษย์อ่านได้ เช่น คำหรือวลี และเชื่อมโยงกับข้อมูลในรูปแบบที่ระบบหรือโปรแกรมสามารถอ่านได้ เช่น รหัสตัวเลขหรือรหัสเฉพาะ

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

<data value="ข้อมูลสำหรับเครื่อง">ข้อมูลที่มนุษย์อ่านได้</data>

• value: คือค่าข้อมูลที่เครื่องสามารถอ่านได้ซึ่งเชื่อมโยงกับเนื้อหาที่อยู่ภายในแท็ก <data>
• เนื้อหาภายในแท็ก <data>: คือข้อมูลที่ผู้ใช้งานจะเห็นได้ (ข้อมูลที่มนุษย์อ่านได้)

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

สมมติว่าเราต้องการแสดงชื่อสินค้าโดยมีรหัสสินค้าซึ่งเป็นข้อมูลที่เครื่องสามารถอ่านได้

<p>ชื่อสินค้า: <data value="123456">เมาส์ไร้สาย</data></p>

ในตัวอย่างนี้ ผู้ใช้จะเห็นข้อความ “เมาส์ไร้สาย” แต่ระบบสามารถดึงข้อมูลรหัสสินค้า “123456” จากแอตทริบิวต์ value ได้

ตัวอย่างที่ 2: แสดงราคาพร้อมรูปแบบข้อมูลสำหรับเครื่อง

สามารถใช้ในการแสดงราคาที่อ่านได้โดยมนุษย์ แต่เชื่อมโยงกับค่าที่สามารถนำไปประมวลผลได้

<p>ราคา: <data value="19.99">19 บาท 99 สตางค์</data></p>

ผู้ใช้จะเห็นข้อความราคาเป็นคำ แต่ระบบสามารถดึงค่าเชิงตัวเลข 19.99 สำหรับการคำนวณได้

ตัวอย่างที่ 3: ใช้ <data> กับข้อมูลเวลา

สามารถใช้แท็กนี้ในการแสดงผลข้อมูลเวลาที่อ่านได้ง่ายสำหรับมนุษย์ ขณะเดียวกันก็เชื่อมโยงกับค่าที่แม่นยำ

<p>ระยะเวลา: <data value="3600">1 ชั่วโมง</data></p>

ผู้ใช้จะเห็นคำว่า “1 ชั่วโมง” แต่ระบบสามารถประมวลผลค่าจำนวนวินาที 3600 ซึ่งมีประโยชน์ในการคำนวณเวลา

ตัวอย่างที่ 4: การเชื่อมโยงข้อมูลสำหรับ UI ที่เข้าถึงได้ง่าย

ในสภาพแวดล้อมที่มีข้อมูลเยอะ เช่น ตารางหรือแผนภูมิ <data> จะช่วยให้ข้อมูลซับซ้อนเข้าถึงได้ง่าย

<tr>
  <td>รายการ</td>
  <td>จำนวน</td>
  <td>ราคา</td>
</tr>
<tr>
  <td><data value="A123">แล็ปท็อป</data></td>
  <td><data value="2">สอง</data></td>
  <td><data value="1999">หนึ่งพันเก้าร้อยเก้าสิบเก้าบาท</data></td>
</tr>

ผู้ใช้จะเห็นข้อความ “แล็ปท็อป”, “สอง”, และ “หนึ่งพันเก้าร้อยเก้าสิบเก้าบาท” แต่ระบบสามารถดึงค่าที่แม่นยำ (A123, 2, 1999) สำหรับการประมวลผล

ตัวอย่างที่ 5: เชื่อมโยงข้อมูลในฟอร์มหรือการโต้ตอบ

สามารถใช้ <data> ในฟอร์มหรือองค์ประกอบที่มีการโต้ตอบ เพื่อให้ประมวลผลข้อมูลได้ง่ายขึ้น

<form>
  <label>กรอกหมายเลขที่คุณชอบ:</label>
  <input type="text" value="ห้า">
  <data value="5">5</data>
</form>

ข้อมูลที่มนุษย์อ่านได้คือ “ห้า” แต่ค่าเชิงตัวเลข “5” จะถูกส่งไปประมวลผลด้านหลัง

กรณีการใช้งานที่เป็นประโยชน์

1. เว็บไซต์อีคอมเมิร์ซ: ใช้ <data> เพื่อแสดงชื่อสินค้า คำอธิบาย หรือราคาในรูปแบบที่มนุษย์อ่านได้ โดยเชื่อมโยงกับรหัสสินค้า หรือราคาที่เป็นตัวเลข
2. ระบบติดตามเวลา: แสดงเวลาในรูปแบบที่มนุษย์เข้าใจง่าย (เช่น “2 ชั่วโมง”) แต่เชื่อมโยงกับเวลาที่ละเอียดสำหรับการประมวลผล (เช่น วินาที)
3. แบบฟอร์มเว็บแอปพลิเคชัน: ช่วยในการเชื่อมโยงข้อมูลที่กรอกโดยผู้ใช้กับรูปแบบข้อมูลที่ระบบนำไปใช้ประมวลผลได้ง่ายขึ้น

การใช้แท็ก <data> เป็นวิธีที่ช่วยให้ทั้งมนุษย์และเครื่องจักรเข้าถึงข้อมูลได้อย่างสะดวก