Custom Data Attributes

🌐 HTML5 🟢 Chapter 29 of 37 📂 Phase 11: HTML APIs & Features 📅 2026 Edition

📌 Covered in this chapter: data-* Attributes Standard · Why Data Attributes are Used · Reading via element.dataset · Storing IDs & UI State · CSS Attribute Selectors · Data Attributes vs Classes

Welcome to Phase 11 (Chapter 29): Custom Data Attributes! Per WHATWG standards, data-* attributes store application-specific custom data or UI state directly on HTML elements.

1Data Attribute Syntax

HTML + JS — dataset Property ▶ Run in HTML Editor

<button data-course-id="python" data-status="active" onclick="alert(this.dataset.courseId)">
  Open Course
</button>

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on HTML5 Standards · Last updated August 2026