W3docs
en
Log in

HTML <body> Tag

The <body> tag holds a page's visible content. Learn its role, the modern CSS replacements for its deprecated attributes, and body events.

The <body> tag defines a web page's content — everything the visitor actually sees, such as text, images, links, lists, tables, and forms. It is placed inside the <html> element, immediately after the <head> element. An HTML document may contain only one <body> tag.

The role of <body> in the document

Every HTML document is split into two parts inside the root <html> element:

  • The <head> holds metadata about the page — its title, character set, linked stylesheets, and scripts. Nothing in the <head> is rendered in the page area.
  • The <body> holds the page's rendered content — the part the browser paints to the screen.

So the <body> is the visible content area. When you write a heading, a paragraph, or an image that should appear on the page, it goes inside the <body>.

CSS classes are commonly added to the <body> element, allowing developers and designers to target a whole page easily (for example, a theme-dark class that restyles everything below it). Even if such classes are never used, they cause no problems.

Syntax

The <body> tag comes in pairs. The content is written between the opening <body> and closing </body> tags.

Example of the HTML <body> tag:

HTML <body> Tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Content of the document</p>
  </body>
</html>
Try it Yourself »

Result

Result

Example of the HTML <body> tag used with the CSS color and line-height properties:

Example of the HTML <body> tag with the CSS properties

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        color: #444444;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <h1>HTML body tag example</h1>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
  </body>
</html>
Try it Yourself »

Deprecated attributes

In older HTML, the <body> tag carried presentational attributes that set page-wide colors and the background image. These are deprecated in HTML5 — do not use them. Each has a CSS replacement:

AttributeValuePurposeModern CSS equivalent
bgcolorcolorPage background colorbackground-color
textcolorDefault text colorcolor
backgroundURLBackground imagebackground-image
linkcolorColor of unvisited linksa:link { color: … }
vlinkcolorColor of visited linksa:visited { color: … }
alinkcolorColor of the active (being clicked) linka:active { color: … }

The CSS way

Instead of presentational attributes, style the <body> with a stylesheet. This separates content from presentation and keeps the markup clean:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #f5f5f5;
        color: #333333;
        background-image: url("paper.png");
      }
      a:link    { color: #0645ad; }
      a:visited { color: #663399; }
      a:active  { color: #d04437; }
    </style>
  </head>
  <body>
    <p>Styled with CSS instead of deprecated <code>&lt;body&gt;</code> attributes.</p>
    <p><a href="https://www.w3docs.com">A link</a></p>
  </body>
</html>

The <body> tag also supports the standard Global Attributes (class, id, style, lang, and so on) and the Event Attributes.

Body-specific event attributes

Most event attributes (like onclick) apply to any element, but a few are meaningful only on <body> because they react to events on the whole window/document:

AttributeFires when
onloadThe page has finished loading (all content and resources).
onunloadThe user navigates away and the page is unloaded.
onresizeThe browser window is resized.

Example — run code once the page is ready and again whenever the window is resized:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title of the document</title>
  </head>
  <body onload="report('loaded')" onresize="report('resized')">
    <p id="status">Waiting…</p>
    <script>
      function report(message) {
        document.getElementById("status").textContent = "Window " + message;
      }
    </script>
  </body>
</html>

In modern code these are often attached with JavaScript instead, for example window.addEventListener("load", …), which keeps behavior out of the markup.

Accessibility

The <body> is the root of all rendered content, so it sets the stage for assistive technologies:

  • The lang attribute on the <html> element (for example lang="en") tells screen readers which language to use when announcing everything inside the <body>. Setting it correctly improves pronunciation.
  • Because the <body> is where navigation and main content both live, provide a skip-navigation link as the first focusable element so keyboard and screen-reader users can jump straight to the main content:
<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <nav><!-- site navigation --></nav>
  <main id="main">
    <h1>Page title</h1>
    <p>Main content…</p>
  </main>
</body>

The skip link is usually hidden visually until it receives keyboard focus, but it stays available to assistive technology at all times.

Practice

Practice
What is true about the HTML body tag according to the information on the webpage?
What is true about the HTML body tag according to the information on the webpage?
Practice
What is the correct HTML5 way to set the page background color?
What is the correct HTML5 way to set the page background color?
Was this page helpful?