HTML <body> id Attribute

The id attribute on a <body> tag assigns an identifier to the body element. The identifier must be unique across the page.

Example

#

An id attribute on a <body> element.

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 id="body-matisse">
 <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>
</body>

Using id

The id attribute assigns an identifier to the <body> element.

The identifier must be unique across the page.

The id allows programmatic access to the <body> element.

Tip:  id is a global attribute that can be applied to any HTML element.


Syntax

<body id="identifier"> 

Values

#

Value Description
identifier A unique alphanumeric string. The id value must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.).

More Examples

A <body> tag with a unique id.
Clicking the button will change the body background color.

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 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="toggle();">Toggle background</button>

  <script>
    let toggle = () => {
      let element = document.getElementById("mybody");
      
      if (element.style.backgroundColor === "papayawhip"){
         element.style.backgroundColor = "";
      } else {
         element.style.backgroundColor = "papayawhip";
      }
    }
  </script>

</body>

Code explanation

The id attribute assigns a unique identifier to the <body> element.

Clicking the button calls JavaScript which locates the <body> using the id.

The body element is then toggled with a different background color.


Browser support

Here is when id 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