Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML <body> id Attribute

An id 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 id allows JavaScript to easily access the <body> element.

It is also used to point to a specific id selector in a style sheet.

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>

Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides