The syntax is simple. Any attribute on any element whose attribute name starts withdata- is a data attribute. Say you have some articles and you want to store some extra information that doesn't have any visual representation. Just usedata attributes for that:

<main>  <article       data-columns="3"    data-index-number="12314"    data-parent="cars">    <!-- Electric car content -->  </article>  <article       data-columns="3"    data-index-number="12315"    data-parent="cars">    <!-- Solar car content -->  </article>  <article       data-columns="4"    data-index-number="12316"    data-parent="cars">    <!-- Flying car content -->  </article></main>

Reading the values of these attributes out inJavaScript is also very simple. You could usegetAttribute() with their full HTML name to read them, but the standard defines a simpler way: aDOMStringMap you can read out via adataset property.

To get adata attribute through thedataset object, get the property by the part of the attribute name afterdata- (note that dashes are converted tocamel case).

const article = document.querySelector("#electric-cars");// The following would also work:// const article = document.getElementById("electric-cars")article.dataset.columns; // "3"article.dataset.indexNumber; // "12314"article.dataset.parent; // "cars"

Each property is a string and can be read and written. In the above case settingarticle.dataset.columns = 5 would change that attribute to"5".

You can also usedocument.querySelector() ordocument.querySelectorAll() with data attribute selectors to find one element or all elements that match:

// Find all elements with a data-columns attributeconst articles = document.querySelectorAll("[data-columns]");// Find all elements with data-columns="3"const threeColumnArticles = document.querySelectorAll('[data-columns="3"]');// You can then iterate over the resultsthreeColumnArticles.forEach((article) => {  console.log(article.dataset.indexNumber);});

Note that, as data attributes are plain HTML attributes, you can even access them fromCSS. For example to show the parent data on the article you can usegenerated content in CSS with theattr() function:

article::before {  content: attr(data-parent);}

You can also use theattribute selectors in CSS to change styles according to the data:

article[data-columns="3"] {  width: 400px;}article[data-columns="4"] {  width: 600px;}

You can see all this working togetherin this JS Bin example.

Data attributes can also be stored to contain information that is constantly changing, like scores in a game. Using the CSS selectors and JavaScript access here this allows you to build some nifty effects without having to write your own display routines. Seethis screencast for an example using generated content and CSS transitions (JS Bin example).

Data values are strings. Number values must be quoted in the selector for the styling to take effect.

Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers may not index data attributes' values.

• This article is adapted fromUsing data attributes in JavaScript and CSS on hacks.mozilla.org.
• Custom attributes are also supported in SVG 2; seeHTMLElement.dataset anddata-* for more information.
• How to use HTML data attributes (Sitepoint)