Data Attributes & Custom Data
10 min read
data-*dataset APICustom Data StorageCSS Content
Data Attributes: HTML as a Data Store
The data-* attribute lets you store custom data directly on HTML elements, accessible via JavaScript and CSS.
Naming Rules
- Must start with
data- - Lowercase only, no uppercase letters
- Hyphens converted to camelCase in JS:
data-user-idbecomesdataset.userId
Use Cases
- Storing IDs for AJAX calls
- Configuration for JS plugins
- Analytics tracking metadata
- CSS hooks for styling states
Performance
Data attributes are stored as strings. For complex data, JSON.parse is needed. For large datasets, consider a JS Map instead.