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.
The <body> element accepts the following attributes.
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 |
afterprint event handler |
onbeforeprint |
beforeprint event handler |
onbeforeunload |
beforeunload event handler |
onhashchange |
hashchange event handler. The hashchange event is fired when navigating to a session history entry whose URL differs from that of the previous one only in the fragment identifier. |
onlanguagechange |
languagechange event handler. |
onmessage |
message event handler. |
onmessageerror |
messageerror event handler. |
onoffline |
offline event handler. |
ononline |
online event handler. |
onpagehide |
pagehide event handler. The pagehide event is fired when traversing from a session history entry. |
onpageshow |
pageshow event handler. The pageshow event is fired when traversing to a session history entry. |
onpopstate |
popstate event handler. The popstate event is fired when navigating to a session history entry that represents a state object. |
onrejectionhandled |
rejectionhandled event handler. |
onstorage |
storage event handler. |
onunhandledrejection |
unhandledrejection event handler. |
onunload |
unload event handler. |
These are also listed under the Event Handlers section below, along with all other event handler content attributes that can be used on all HTML elements.
Global Attributes
The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <body> tag , as well as with all other HTML tags.
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handlers
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.
onabortonauxclickonafterprintonbeforeprintonbeforeunloadonbluroncanceloncanplayoncanplaythroughonchangeonclickoncloseoncontextmenuoncopyoncuechangeoncutondblclickondragondragendondragenterondragexitondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerroronfocusonformdataonhashchangeoninputoninvalidonkeydownonkeypressonkeyuponlanguagechangeonloadonloadeddataonloadedmetadataonloadstartonmessageonmessageerroronmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponofflineononlineonpagehideonpageshowonpasteonpauseonplayonplayingonpopstateonprogressonratechangeonresetonresizeonrejectionhandledonscrollonsecuritypolicyviolationonseekedonseekingonselectonslotchangeonstalledonstorageonsubmitonsuspendontimeupdateontoggleonunhandledrejectiononunloadonvolumechangeonwaitingonwheel
Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.
For more detail, see HTML event handler content attributes.