HTML Data Attributes
In this page:
Custom Data Attributes
Data attributes allow you to store custom information inside standard HTML tags without violating validation rules. Every custom data attribute must start with the prefix data- followed by your custom name in lowercase.
Note: Choose clear, descriptive names for your custom data attributes, like data-tool-type or data-status.
Warning: Do not use uppercase letters or spaces in your custom data attribute names, as it will break validation.
Example: Custom Data Attributes
<div data-tool-type="calculator" data-status="active">Widget</div>Reading Data Attributes with CSS
You can target custom data attributes inside your stylesheets using standard attribute selectors, and even display their values as text on the screen using the CSS content property.
Note: Use data attributes in your stylesheets to apply conditional styling based on custom properties.
Warning: Do not put essential content inside data attributes; use standard text tags instead to keep your site accessible.
Example: Reading Data Attributes with CSS
<style>
[data-status="active"] {
border: 2px solid green;
}
</style>
<div data-status="active">Active widget</div>Reading Data with dataset in JavaScript
JavaScript can easily read and modify custom data attributes using the dataset property. The browser automatically translates your hyphenated data- attributes into camelCase object properties.
Note: Access your data attributes in JavaScript using camelCase names (e.g., data-tool-type becomes dataset.toolType).
Warning: All data attribute values are read by JavaScript as plain strings; convert them to numbers manually if needed.
Example: Reading Data with dataset in JavaScript
<div id="widget" data-tool-type="calculator"></div>
<script>
console.log(document.getElementById('widget').dataset.toolType);
</script>Dynamic State Toggles
You can use data attributes to manage interactive states on your page, like toggling between active/inactive settings or dark/light modes, using simple scripts and style rules.
Note: Use data attributes to control your layout toggles and style changes dynamically.
Warning: Make sure your interactive buttons are accessible to keyboard users who cannot navigate with a mouse.
Example: Dynamic State Toggles
<button data-state="inactive" onclick="this.dataset.state = 'active'">Toggle</button>Accessibility and ARIA Concerns
While data attributes are highly useful for custom styling and scripting, they carry absolutely no semantic meaning. Assistive devices like screen readers will ignore your data attributes entirely, so you must use standard ARIA attributes to keep your interactive elements accessible.
Note: Use standard ARIA attributes (like aria-expanded) to describe states to screen readers, and data attributes for custom CSS styles.
Warning: Never use data attributes as a replacement for standard ARIA roles and labels.
Example: Accessibility and ARIA Concerns
<button data-expanded="false" aria-expanded="false">Show more</button>- Using uppercase letters or spaces in your custom data attribute names.
- Attempting to use data attributes as a replacement for standard accessibility ARIA roles.
- Forgetting that JavaScript reads dataset values as plain strings, which can cause calculation errors.
- Custom data attributes allow developers to store private variables inside HTML tags using the data- prefix.
- Style data attributes inside CSS using attribute selectors, or read and update their values in JavaScript using dataset properties.
- Data attributes carry no semantic meaning; always pair them with standard ARIA attributes to keep your interactive elements accessible.
Standard HTML5 data attributes and JavaScript dataset properties are supported natively by all modern web browsers.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: