Data Attributes
Store custom data directly in your HTML elements and create powerful, dynamic web experiences.
What are Data Attributes?
Data attributes allow you to store extra information in HTML elements without using non-standard attributes or extra properties. They start with data- and can be used to make your HTML more interactive and dynamic.
Key Benefit: Data attributes keep your HTML valid while storing custom data!
ā Perfect For
- Storing element-specific data
- JavaScript configuration
- CSS styling hooks
- Testing identifiers
- Dynamic content
ā Avoid For
- Visual content (use visible text)
- Existing HTML attributes
- Sensitive information
- Large datasets
š Quick Reference
data-*Any custom attribute
element.dataset.*JavaScript access
[data-*]CSS selector
š® Try It Out
šļø Visual Examples
Gradient Card
data-visual-example='gradient-card'
Success State
data-status='active'