HTML <body> data-* Attribute

The data-* attribute on a <body> tag attaches additional data to the body. To create a custom attribute, replace the * with a lowercase string, such as data-id, data-status, or data-location.

Example

#

A custom data-creationdate attribute on a <body> tag.
The attribute value is not visible, but is readable by JavaScript.

<body data-creationdate="March 14, 2020">
  <article>
    <h3>Henry Matisse</h3>

    <p>Matisse was born in Le Cateau-Cambrésis, in the Nord department 
      in Northern France, the oldest son of a wealthy grain merchant. 
      He grew up in Bohain-en-Vermandois, Picardie, France. In 1887, 
      he went to Paris to study law, working as a court administrator 
      in Le Cateau-Cambrésis after gaining his qualification. He first 
      started painting 1889, after his mother brought him art supplies 
      during a period of convalescence following an attack of appendicitis. 
      He discovered "a kind of paradise" as he later described it, and 
      decided to become an artist, deeply disappointing his father.
    </p>
  </article>
</body>

Using data-*

The data-* attribute adds custom information to a <body> element.

The * part is replaced with a lowercase string, such as data-id, data-datetime, data-size, etc.

A <body> element can have any number of data-* attributes, each with their own name.

Using data-* attributes reduces the need for requests to the server.

Note: The data-* attribute is not visible and does not change the appearance of the body or page.


Syntax

<body data-*="value">

Note: The * can be any string, such as data-iddata-costdata-supplier,  etc.


Values

#

Value Description
value A string value. Can be numeric, alphanumeric, JSON, etc.

More Examples

A custom data-page-type attribute on a <body> element.
Clicking the button will display the page type value.

Henry Matisse

Matisse was born in Le Cateau-Cambrésis, in the Nord department in Northern France, the oldest son of a wealthy grain merchant. He grew up in Bohain-en-Vermandois, Picardie, France. In 1887, he went to Paris to study law, working as a court administrator in Le Cateau-Cambrésis after gaining his qualification. He first started painting 1889, after his mother brought him art supplies during a period of convalescence following an attack of appendicitis. He discovered "a kind of paradise" as he later described it, and decided to become an artist, deeply disappointing his father.


<body data-page-type="Home page" id="mybody">
  <article>
    <h3>Henry Matisse</h3>

    <p>Matisse was born in Le Cateau-Cambrésis, in the Nord department 
      in Northern France, the oldest son of a wealthy grain merchant. 
      He grew up in Bohain-en-Vermandois, Picardie, France. In 1887, 
      he went to Paris to study law, working as a court administrator 
      in Le Cateau-Cambrésis after gaining his qualification. He first 
      started painting 1889, after his mother brought him art supplies 
      during a period of convalescence following an attack of appendicitis. 
      He discovered "a kind of paradise" as he later described it, and 
      decided to become an artist, deeply disappointing his father.
    </p>
  </article>
  
  <button onclick="show();">Show data</button>

  <script>
    let show = () => {
      let element = document.getElementById("mybody");
      alert("Page type = " + element.getAttribute('data-page-type'));
    }
  </script>
</body>

Code explanation

The <body> tag has a data-pagename attribute.

The data-pagename attribute contains the page name of the HTML document.

Clicking the button will invoke a JavaScript function that locates the body tag using the id.

JavaScript then extracts and displays the page name.


Browser support

Here is when data-* support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <body>
Guides