References

Beginner-friendly references for web development, with live, editable examples.

The HTML <body> tag

Element All modern browsers Updated
Quick answer

The HTML <body> element contains all the visible content of the page — text, images, links, everything the user sees. There is exactly one per document, and it also hosts window-level event handlers like onload.

Overview

The <body> element holds everything that is displayed on the page — text, images, links, all of it. It is the second and final child of <html>, coming after the <head>, and there is exactly one per document.

It is also the home of the window-level event handler attributes — onload, onresize, onhashchange and similar — which fire for events on the window rather than the body itself. Attaching these with addEventListener on window in JavaScript is generally preferred to the inline attributes, since it keeps behavior out of the markup and allows multiple handlers.

Its old presentational attributes (background color, text color, link colors) are obsolete; style the body with CSS instead.

Syntax

<body>
  <h1>Welcome</h1>
  <p>Page content goes here.</p>
</body>

Attributes

The <body> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
onafterprint Runs JavaScript after printing.
onbeforeprint Runs JavaScript before printing.
onbeforeunload Runs JavaScript before the page unloads, to warn about unsaved changes.
onhashchange Runs JavaScript when the URL hash changes.
onload Runs JavaScript when the element or page finishes loading.
onmessage Runs JavaScript when a message is received.
onoffline Runs JavaScript when the browser goes offline.
ononline Runs JavaScript when the browser comes back online.
onpopstate Runs JavaScript on history navigation.
onresize Runs JavaScript when the window is resized.
onstorage Runs JavaScript when storage changes in another tab.

Example

Live example 
<body>
  <h1>Hello, world</h1>
  <p>This is the visible page content.</p>
</body>

More Examples

HTML5 Basic Boilerplate

HTML5 Basic Boilerplate

426 0

Best practices

  • Include exactly one <body> per document, holding all the visible content.
  • Prefer window.addEventListener over the inline onload/onresize attributes.
  • Style the body with CSS — its presentational attributes are obsolete.
  • Keep metadata in the <head>, not the body.

Frequently asked questions

What is the body element?
The element that contains all the visible content of the document — the second child of <html>.
How many body elements can a document have?
Exactly one.
What are the on* attributes on the body element?
Window-level event handlers like onload and onresize. Attaching them with window.addEventListener is generally preferred.
What is the difference between the body and the head?
The <head> holds non-rendered metadata; the <body> holds the visible page content.
blockquote br