HTML <body> Tag
The HTML <body> tag is used for creating a 'body' element. This element represents the main content section of the HTML document.
Generally, most content displayed on a typical web page is contained within the <body> element. Therefore, the <body> element usually contains many other elements (given the amount of content on a typical web page). This usually results in the <body> start tag being closer to the top of the document, with the end tag near the bottom.
The <body> element is categorized as "sectioning root". Most elements contained within the <body> are categorized as "flow content".
HTML documents must have no more than one <body> element.
Syntax
The <body> tag is written as <body></body> with the document's content inserted between the start and end tags. Any attributes can be inserted into the start tag (for example, <body onload="">). Note that there are 12 event handlers that are only available for the <body> element (and the <frameset> element in HTML 4 and earlier) — these are listed further down this page.
The <body> must be the second element in an <html> element.
Like this:
Example
This example demonstrates how the <body> element appears within an HTML document. Notice that none of the content outside of the <body> element appear on the page.
Attributes
Attributes can be added to an HTML element to provide more information about how the element should appear or behave.
There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
The <body> element accepts the following attributes.
Element-Specific Attributes
This table shows the attributes that are specific to the <body> tag/element.
HTML5 introduced the following event handlers that can be used with the <body> element (and the <frameset> element in HTML 4 and earlier).
| Attribute | Description |
|---|---|
| onafterprint | The afterprint event handler |
| onbeforeprint | The beforeprint event handler |
| onbeforeunload | The beforeunload event handler |
| onhashchange | The hashchange event handler |
| onmessage | The message event handler |
| onoffline | The offline event handler |
| ononline | The online event handler |
| onpagehide | The pagehide event handler |
| onpageshow | The pageshow event handler |
| onpopstate | The popstate event handler |
| onstorage | The storage event handler |
| onunload | The unload event handler |
Global Attributes
The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the <body> tag , as well as with all other HTML tags.
- accesskey
- class
- contenteditable
- contextmenu
- dir
- draggable
- dropzone
- hidden
- id
- inert
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- spellcheck
- style
- tabindex
- title
- translate
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handler Content Attributes
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.
Below are the standard HTML5 event handler content attributes.
Again, you can use any of these with the <body> element, as well as any other HTML5 element.
- onabort
- oncancel
- onblur
- oncanplay
- oncanplaythrough
- onchange
- onclick
- oncontextmenu
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragexit
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onformchange
- onforminput
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreadystatechange
- onscroll
- onseeked
- onseeking
- onselect
- onshow
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- onvolumechange
- onwaiting
For a full explanation of these attributes, see HTML 5 event handler content attributes.
Differences Between HTML 4 & HTML 5
The following attributes were supported in previous versions of HTML but are obsolete in HTML5:
alink(deprecated in HTML 4)background(deprecated in HTML 4)bgcolorlink(deprecated in HTML 4)text(deprecated in HTML 4)vlink(deprecated in HTML 4)
HTML5 introduced the following event handlers that can be used with the <body> element and the <frameset> element.
onafterprintonbeforeprintonbeforeunloadonhashchangeonmessageonofflineononlineonpagehideonpageshowonpopstateonstorageonunload
To see more detail on the two versions see HTML5 <body> Tag and HTML4 <body> Tag. Also check out the links to the official specifications below.
Template
Here's a template for the <body> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.
For more information on attributes for this tag, see HTML5 <body> Tag and HTML4 <body> Tag.
* The attributes marked with an asterisk have a different meaning when specified on <body> elements as those elements expose event handlers of the Window object with the same names.
Tag Details
For more details about the <body> tag, see HTML5 <body> Tag and HTML4 <body> Tag.
Specifications
Here are the official specifications for the <body> element.
- HTML5 Specification (W3C)
- HTML Living Standard (WHATWG)
- Current W3C Draft (the next version that is currently being worked on)
- HTML 4 (W3C)
What's the Difference?
W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.