HTML5
What are Custom Attributes in HTML5?
HTML5 introduced custom data attributes, written as data-*, which let you store extra, private information on any HTML element. They provide a standard, valid way to attach custom data to markup without breaking validation, and they are easy to read and write from JavaScript and CSS.
What Are data-* Attributes?
A custom data attribute is any attribute whose name starts with data- followed by at least one lowercase character. You can add as many as you like to any element. They do not affect rendering — they simply carry data for your scripts to use.
<li id="product"
data-product-id="1024"
data-category="books"
data-in-stock="true">
The Pragmatic Programmer
</li>Reading Them in JavaScript with dataset
The DOM exposes all data-* attributes through the element's dataset property. Hyphenated names are converted to camelCase: data-product-id becomes dataset.productId.
const item = document.getElementById("product");
console.log(item.dataset.productId); // "1024"
console.log(item.dataset.category); // "books"
console.log(item.dataset.inStock); // "true"
// Setting a value updates the attribute
item.dataset.category = "software";Why Use Custom Attributes?
- Store page-specific data without extra HTTP requests or hidden fields.
- Keep JavaScript decoupled from markup by reading configuration from the DOM.
- Target elements in CSS with attribute selectors, e.g. [data-in-stock='false'].
data-* values are always strings. Convert them with Number(), JSON.parse(), or comparisons (=== 'true') when you need numbers or booleans.