body (HTML element)

Share this article

Description

The body element wraps around all of the content that will be displayed on screen (or in other media, such as print), such as headings, paragraphs, images, tables, and so on. It has some unique attributes, including alink, link, and vlink, all of which are now deprecated, as well as a number of other attributes that aren’t defined in any standard but are, regrettably, still in common use. These are:

marginheight

sets the space between the top and bottom of the document content and the viewport (originally defined by Netscape 4)

marginwidth

sets the space between the left and right of the document content and the viewport (originally defined by Netscape 4)

topmargin/bottommargin

Internet Explorer’s equivalent of marginheight (allows us to set top and bottom margins separately)

leftmargin/rightmargin

Internet Explorer’s equivalent of marginwidth (allows the setting of left and right margins separately)

Note that these attributes are no longer required to achieve the visual effects they were originally intended for—the equivalent CSS for these attributes is the margin property (or margin-top, margin-right, and so on), which is supported by all browsers.

All XHTML web pages require a body element, with the exception of frameset-based web pages, for which the appropriate frameset doctype must be declared. With HTML syntax (even with a strict doctype), it’s possible to omit the opening <body> and closing </body> tags and it will still validate (the browser creates it in the DOM regardless), but it’s best to include it nonetheless.

In HTML and XHTML, you should not place character data (text) or inline elements such as span, em, or strong directly into the body. Instead, these should be contained inside block-level elements such as p elements, headings h1 – h6 and so on. However, if you use a transitional HTML4 or XHTML1 doctype, it is permissible for character data and inline elements to appear directly in the body, but this is deprecated.

Example

The body contains all the content that’s to be made visible to the user:

<body>
  <h1>101 Ways to make a paper aeroplane</h1>
  <p>Let's start with the basics …</p>
  ⋮
</body>

Use This For …

Use body to hold all the document content that you want to be visible to the reader.

Adam RobertsAdam Roberts
View Author

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week