ป้ายกำกับ: Http/3

html5: กับบรรณารักษ์และการอธิบายข้อมูล (Data & Metadata)html5: กับบรรณารักษ์และการอธิบายข้อมูล (Data & Metadata)

2009-06-072009-06-07| phunsanitphunsanit| 0 Comment | 07:00

ใน HTML5 มีการเพิ่มและปรับปรุง Attribute หลายตัวที่ออกแบบมาเพื่อ **อธิบายข้อมูลเพิ่มเติม** ให้กับทั้งเบราว์เซอร์, Search Engine, นักพัฒนา (JavaScript/CSS) รวมไปถึงเทคโนโลยีช่วยเข้าถึงอย่าง Screen Reader เหมือนที่บรรณารักษ์ทำดัชนีคำศัพท์

Below is a breakdown of key attributes grouped by their primary intent and usage.

Custom Data Attributes (data-*)

กลุ่ม Attribute ที่นิยมและใช้งานบ่อยที่สุดสำหรับนักพัฒนา ช่วยให้เราสามารถฝากข้อมูลไว้กับ DOM Element ใดๆ ได้อย่างเป็นมาตรฐาน โดยไม่ขัดต่อข้อกำหนดของ HTML (Valid HTML) และไม่ส่งผลต่อการแสดงผลของเบราว์เซอร์

  • data-*: ไวยากรณ์คือขึ้นต้นด้วย data- ตามด้วยชื่อที่เรากำหนดเอง ( lowercase เท่านั้น)

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

JavaScript

<!-- ฝากข้อมูล User ID และ Role ไว้ใน Element -->
<article class="user-card" data-user-id="108" data-role="admin" data-status="active">
  <h3>John Doe</h3>
</article>

John Doe

การนำไปใช้งานต่อ

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

ใน JavaScript: สามารถอ่านและแก้ไขค่าได้ง่ายผ่านโปรปาตี dataset

JavaScript

const card = document.querySelector('.user-card');
// อ่านค่า
console.log(card.dataset.userId); // "108"
console.log(card.dataset.role);   // "admin"
// แก้ไขค่า
card.dataset.status = 'suspended';

ใน CSS: ใช้สำหรับ Select Element หรือดึงค่ามาแสดงผ่าน Pseudo-element

JavaScript

/* ซ่อน Element ที่มี status เป็น inactive */
&#x5B;data-status="inactive"] {
  display: none;
}
/* ดึงค่ามาแสดงผล */
.user-card::after {
  content: "Role: " attr(data-role);
}

Microdata Attributes (ความหมายเชิงโครงสร้างสำหรับ Search Engine)

ใช้อธิบายโครงสร้างข้อมูลให้ Search Engine (เช่น Google, Bing) เข้าใจว่าเนื้อหาในหน้านั้นคืออะไรอย่างแม่นยำ (เช่น เป็นข้อมูลสินค้า, บุคคล, หรือบทความ) เพื่อนำไปทำ Rich Snippets

  • itemscope: กำหนดขอบเขตของข้อมูล (Item Boundary)
  • itemtype: ระบุ URL Schema ชนิดข้อมูลจากมาตรฐาน Schema.org
  • itemprop: ระบุชื่อ Property หรือคุณลักษณะของข้อมูลนั้นๆ
  • itemid: ระบุตัวตนเฉพาะ (Global Identifier) ของ Item เช่น ISBN หรือ URL
  • itemref: เชื่อมโยงข้อมูลที่ไม่ได้เรียงอยู่ภายในคอนเทนเนอร์เดียวกัน ให้ถือว่าเป็น Item เดียวกัน

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

JavaScript

<div itemscope="" itemtype="https://schema.org/Product">
  <h1 itemprop="name">MacBook Pro 16"</h1>
  <img itemprop="image" src="macbook.jpg" alt="MacBook Pro">
  <div itemprop="offers" itemscope="" itemtype="https://schema.org/Offer">
    <span itemprop="price" content="89900.00">89,900</span>
    <meta itemprop="priceCurrency" content="THB">
    <link itemprop="availability" href="https://schema.org/InStock">มีสินค้าพร้อมส่ง
  </div>
</div>

MacBook Pro 16″

macbook html5: กับบรรณารักษ์และการอธิบายข้อมูล (Data & Metadata)
89,900 มีสินค้าพร้อมส่ง

Accessibility & Context Attributes (ARIA & Tooltips)

อธิบายบริบทและฟังก์ชันการทำงานของ Element ให้กับผู้พิการทางสายตาที่ใช้งาน Screen Reader หรืออธิบายคำใบ้สั้นๆ ให้กับผู้ใช้ทั่วไป

  • title: อธิบายข้อมูลเพิ่มเติมในรูปแบบ Tooltip (จะแสดงขึ้นมาเมื่อวางเมาส์เหนือ Element)
  • alt: อธิบายความหมายหรือเนื้อหาของรูปภาพ (สำคัญต่อทั้ง Screen Reader และ SEO)
  • aria-label: กำหนดข้อความอธิบายความหมายของ Element นั้นโดยตรง (เมื่อไม่มีข้อความปรากฏบนหน้าจอ)
  • aria-labelledby: อ้างอิง id ของ Element อื่นมาเป็นข้อความอธิบายชื่อ/หัวข้อ
  • aria-describedby: อ้างอิง id ของ Element อื่นมาเป็นข้อความอธิบายรายละเอียดเชิงลึก

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

JavaScript

<!-- Tooltip -->
<abbr title="HyperText Markup Language">HTML5</abbr>
<!-- Accessibility สำหรับปุ่มไอคอน -->
<button aria-label="ปิดหน้าต่าง">
  <span class="icon-close">X</span>
</button>
<!-- เชื่อมโยงช่องกรอกข้อมูลกับข้อความช่วยเหลือ -->
<label for="pwd">รหัสผ่าน:</label>
<input type="password" id="pwd" aria-describedby="pwd-help">
<p id="pwd-help">รหัสผ่านต้องมีความยาวอย่างน้อย 8 ตัวอักษร ประกอบด้วยตัวอักษรและตัวเลข</p>
HTML5

รหัสผ่านต้องมีความยาวอย่างน้อย 8 ตัวอักษร ประกอบด้วยตัวอักษรและตัวเลข

Form Input Description Attributes

กลุ่ม Attribute สำหรับฟอร์ม ช่วยอธิบายประเภท ชนิด หรือรูปแบบของข้อมูลที่คาดหวังจากผู้ใช้งาน

  • placeholder: ข้อความตัวอย่างหรือคำแนะนำสั้น ๆ ก่อนการพิมพ์ข้อมูล
  • pattern: กำหนด Regular Expression เพื่ออธิบายและบังคับรูปแบบข้อมูลที่ถูกต้อง
  • autocomplete: อธิบายประเภทข้อมูลเพื่อช่วยเบราว์เซอร์เติมข้อมูลให้อัตโนมัติ (เช่น email, current-password, cc-number)

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

JavaScript

<form>
  <label for="phone">เบอร์โทรศัพท์มือถือ:</label>
  <input type="tel" id="phone" name="phone" placeholder="08X-XXX-XXXX" pattern="&#91;0-9]{3}-&#91;0-9]{3}-&#91;0-9]{4}" autocomplete="tel" required="">
</form>

สรุปเปรียบเทียบการใช้งาน

Attribute Groupจุดประสงค์หลักผู้รับ/ผู้อ่านข้อมูล
data-*เก็บข้อมูลส่วนตัวของแอปพลิเคชันJavaScript / CSS
itemscope / itempropระบุความหมายและประเภทของข้อมูลตามมาตรฐาน SchemaSearch Engine / Bots
aria-* / altอธิบายบทบาทและบริบทการใช้งานเพื่อการเข้าถึงScreen Reader / Accessibility Tools
placeholder / titleอธิบายคำแนะนำเพิ่มเติมหรือคำใบ้แก่ผู้ใช้ผู้ใช้งานทั่วไป (End User)

อ่านเพิ่มเติม