Intermediate LevelHTML & Semantic Web
How do custom data attributes (data-*) store custom metadata accessible via JavaScript?
❓ Interview Prompt: Explain data-* attribute syntax, DOM dataset API (element.dataset.name), CSS attribute selectors, and performance.
Custom Data Attributes (*'data-'**) allow embedding custom metadata directly into HTML elements without violating HTML specifications.
Usage:
•
HTML: Defined as 'data-user-id="42"' or 'data-role="admin"'.
•
JavaScript: Accessed via 'element.dataset.userId' (automatically converts hyphens to camelCase!).
•
CSS: Targetable via attribute selectors: '[data-role="admin"] { border: 2px solid gold; }'.
Code Implementation Example
html
<button
id="user-btn"
data-user-id="105"
data-account-status="active"
onclick="console.log(this.dataset.userId)"
>
User Profile
</button>💡Accessing custom HTML data-* attributes via JavaScript dataset API.
🎯 Interview Key Takeaway
Use data-* attributes to store custom DOM metadata, and access them in JavaScript via element.dataset.camelCase.
#data-*#dataset#DOM API#Intermediate
Back to all HTML & Semantic Web Questions→