Datatributs

Datatributs, or data attributes, are HTML5 features that allow developers to store extra, non-visible data on HTML elements. They consist of attribute names that begin with data- and are valid HTML. The data is intended for use by client-side scripts or for including machine-readable information in markup, without altering the element's presentation.

In JavaScript, these values are exposed via the element.dataset property. An attribute named data-user-id becomes dataset.userId, data-foo-bar becomes dataset.fooBar, and values are always strings. You can read and write them to pass information to scripts, for example to identify items in a list or attach metadata to interactive controls. In CSS, you can select elements by data attributes using selectors like [data-user-id="123"].

Best practices: use data attributes to store small amounts of non-sensitive data needed by scripts. Do not store secrets or large data in them, as they are part of the DOM and accessible to anyone who can view the page. They are not a substitute for server-side state or a secure data store.

Example: <div data-user-id="123" data-status="active"></div>; later, in JavaScript: const el = document.querySelector('div[data-user-id]'); console.log(el.dataset.userId); // "123"

Compatibility: data attributes are standard in HTML5 and supported by all modern browsers.