HTML Data Attributes.

Data attributes (data-*) allow you to store extra, custom information directly on HTML elements. This data can then be easily accessed using CSS or JavaScript.

The Essentials

Data attributes always start with the prefix 'data-'.

They are used to store data that is private to the page or application.

Any attribute name can be used as long as it follows the data-* format.

They provide a way to link data to specific UI elements without using non-standard attributes.

JavaScript can access these via the 'dataset' property.

CSS can target elements based on these attributes using attribute selectors.

Professional Insights

JavaScript Integration

A data-user-id='123' attribute can be accessed in JS using 'element.dataset.userId'. Notice how the hyphenated name becomes camelCase in JavaScript.

Styling with Data Attributes

You can style elements based on their data. For example, [data-status='active'] { border: 2px solid green; } is a powerful way to manage UI states.

Data vs. Hidden Inputs

Before data attributes, developers used hidden input fields to store state. Data attributes are cleaner, more semantic, and don't interfere with form submissions.

SEO and Accessibility Note

Data attributes are generally ignored by search engines and screen readers. Never store critical content (like a product price) solely in a data attribute.

Critical Pitfalls

Using uppercase letters in data attribute names (they will be converted to lowercase).

Storing sensitive information (like passwords) in data attributes—anyone can see them in the source.

Overusing them for styling when a simple class would be more performant.

Forgetting the 'data-' prefix.

Interactive Lab

Sprint Tasks

Add a data attribute named 'category' with the value 'fruit' to the div

Add a data attribute named 'id' with the value '101' to the same div

Loading editor...

Production Preview