HTML · Global attributes

data-*

A custom data attribute that stores extra information on an element without inventing non-standard attributes.

htmlRunnable example html course

Syntax

data-id="42"

Example

Try it

<button data-course="css" onclick="alert(this.dataset.course)">CSS</button>

Read data-* values in JavaScript through element.dataset.

Reference pages are the quick answer. The course explains the why, shows the full example and ends with a challenge.