ใน 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 เท่านั้น)

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

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

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

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

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

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

/* ซ่อน Element ที่มี status เป็น inactive */
[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 เดียวกัน

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

<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″

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 อื่นมาเป็นข้อความอธิบายรายละเอียดเชิงลึก

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

<!-- 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>

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

Form Input Description Attributes

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

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

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

<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>

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

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

• Email: list ที่ควรมี
• HTML5 Form Controls: การใช้ Input Types ตัวใหม่ (email, tel, url, number, range) บน Mobile
• ตรวจฟอร์มด้วย HTML 5 / jQuery Validation Plugin