<h1>Secret agents</h1><ul>  <li data-id="10784">Jason Walters, 003: Found dead in "A View to a Kill".</li>  <li data-id="97865">    Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in    "Goldeneye".  </li>  <li data-id="45732">    James Bond, 007: The main man; shaken but not stirred.  </li></ul>

h1 {  margin: 0;}ul {  margin: 10px 0 0;}li {  position: relative;  width: 200px;  padding-bottom: 10px;}li::after {  content: "Data ID: " attr(data-id);  position: absolute;  top: -22px;  left: 10px;  background: black;  color: white;  padding: 2px;  border: 1px solid #eee;  opacity: 0;  transition: 0.5s opacity;}li:hover::after {  opacity: 1;}

All such custom data are available via theHTMLElement interface of the element the attribute is set on. TheHTMLElement.dataset property gives access to them.The* may be replaced by any name followingthe production rule of XML names which includes the following recommendations:

• The name should not start withxml (case-insensitive), as it's reserved for future XML specifications.
• The name should not contain any colon characters (:), as XML assigns meaning to such names.
• The name should not contain any capital letters, as XML is all lowercase.

These are recommendations. If these naming recommendations are not followed, no errors will occur. The attributes will still be matched using CSSattribute selectors, with the attribute being case insensitive and any attribute value being case-sensitive. Attributes not conforming to these three recommendations will also still be recognized by the JavaScriptHTMLElement.dataset property and user-agents will include the attribute in theDOMStringMap containing all the custom data attributes for anHTMLElement.

If you plan to useHTMLElement.dataset, the portion of the attribute name following thedata- can only include characters allowed in JavaScript property names (and hyphens, which will be removed). Thedataset version of the attribute name removes the "data-" prefix and converts the rest of the name fromkebab-case to camelCase. For example,element.getAttribute("data-test") is equivalent toelement.dataset.test anddata-test-abc will be accessible asHTMLElement.dataset.testAbc (or byHTMLElement.dataset["testAbc"]). Avoid non-alphabetic characters following a hyphen, such asdata-test-1 ordata--test, as they will not be recognized byHTMLElement.dataset.

By addingdata-* attributes, even ordinary HTML elements can become rather complex and powerful program-objects. For example, a space-ship "sprite" in a game could just be an<img> element with aclass attribute and severaldata-* attributes:

<img   src="shipX3.png"  data-ship-id="324"  data-weapons="laserI laserII"  data-shields="72%"  data-x="414354"  data-y="85160"  data-z="31940" />

function clickSpaceship() {  spaceships[this.dataset.shipId].blasted();}document.querySelectorAll("img.spaceship").forEach((ship) => {  ship.addEventListener("click", clickSpaceship);});

For a more in-depth tutorial about using HTML data attributes, seeUsing data attributes.

• Allglobal attributes.
• TheHTMLElement.dataset property that allows to access and modify these values.
• Using data attributes