What are HTML data attributes (data-*)?
Answer
HTML data attributes allow you to embed custom data directly in HTML elements without using non-standard attributes or hidden inputs. Any attribute starting with data- is valid: <div data-user-id="42" data-role="admin">. Access them in JavaScript via the dataset API: element.dataset.userId (camelCase, without the data- prefix). They are useful for storing information that JavaScript needs to interact with an element (IDs, states, configuration) without polluting the class or ID attributes. CSS can also select by data attributes: [data-role="admin"] { color: red; }. They are widely used in Bootstrap components and custom JavaScript interactions.
Previous
What is the difference between CSS transitions and CSS animations?
Next
What is ARIA and how does it improve web accessibility?
More HTML / CSS Questions
View all →- Intermediate How does the CSS cascade work?
- Intermediate What is BEM (Block Element Modifier) methodology in CSS?
- Intermediate What are CSS custom properties (CSS variables)?
- Intermediate What is the difference between em, rem, px, vh, and vw units in CSS?
- Intermediate How does Flexbox differ from CSS Grid? When would you use each?