What are HTML data attributes (data-*)?
Why Interviewers Ask This
Candidates at the intermediate level are expected to not only know this concept but explain the trade-offs involved. Interviewers use this question to see if you can reason about design decisions, not just recall facts.
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.
Pro Tip
If you're unsure about a detail, say so honestly and explain your reasoning. Interviewers respect candidates who can think through uncertainty rather than bluffing.
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?