Detailed explanation
A data attribute is a custom HTML attribute whose name starts with data-, such as data-user-id or data-role. It stores application-specific information on an element without inventing unsupported HTML attributes or putting metadata into class names. For example, <button data-user-id="42" data-role="admin">Edit</button> associates an Edit button with a user identifier and a role. This is useful when repeated interface elements need their own values, such as product IDs, tab targets, or action names, while sharing the same JavaScript event handler.
JavaScript exposes these attributes through an element's dataset property, which returns a DOMStringMap. After const btn = document.querySelector('button'), btn.dataset.userId returns "42", and btn.dataset.role returns "admin". Hyphenated names become camelCase property names: data-user-id maps to dataset.userId. Values are strings, not automatically typed JavaScript values. Convert them explicitly when needed, for example Number(btn.dataset.userId), and validate the result. A value of "false" is still a non-empty string, so Boolean(btn.dataset.enabled) would return true; compare it with "true" when that is your chosen convention.
The connection works in both directions. Assigning btn.dataset.role = "editor" updates the element's data-role attribute, while delete btn.dataset.role removes it. You can also use getAttribute('data-user-id') and setAttribute('data-user-id', '43'). CSS can select these attributes, for example [data-role="admin"] { font-weight: bold; }, although classes are usually clearer for general styling. In an event handler attached directly to the button, event.currentTarget.dataset.userId identifies the associated user without maintaining a separate element-to-ID lookup.
Data attributes are appropriate for small pieces of element-related metadata, not secrets or authoritative security decisions. Anyone can inspect or modify them in browser developer tools, so a server must still verify permissions before performing an operation. They also do not automatically provide accessible names, roles, or states; use native HTML semantics and appropriate ARIA attributes for those purposes. Interviewers typically check whether you understand naming, string conversion, DOM updates, and the boundary between convenient client-side metadata and trusted application data.
Key points to remember
- Custom attributes use the data-* prefix to attach application metadata to HTML elements.
- Access data-user-id as element.dataset.userId; hyphenated names map to camelCase.
- Dataset values are strings, so numbers and booleans require explicit conversion.
- Writing or deleting dataset properties updates or removes the corresponding HTML attributes.
- Data attributes support JavaScript access and CSS selectors, but provide neither security nor accessibility semantics.
Common mistakes candidates make
- Using dataset.user-id instead of dataset.userId to access data-user-id.
- Assuming "42" is a number or treating the string "false" as a false boolean.
- Storing secrets in data attributes or trusting a data-role value to authorise an operation.
Likely follow-up questions
How do you update or remove a data attribute?
Set element.dataset.userId = '43' to update data-user-id. Use delete element.dataset.userId to remove the attribute; assigning null instead stores the string "null".
What is the difference between dataset and getAttribute()?
dataset provides convenient property access for data-* attributes using camelCase names. getAttribute() uses the full attribute name and works with other attributes too; a missing value returns null with getAttribute() but undefined through a missing dataset property.
Should you use a data attribute or a class?
Use a data attribute for element-specific metadata such as a product ID or action name. Use a class primarily to group elements for styling; both can be targeted by CSS and JavaScript selectors.
Interview tip: Start with the data-* definition, demonstrate data-user-id mapping to dataset.userId, and finish by noting that values are strings and are not trusted security data.