body element
If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Description
The body element is the container for all renderable aspects of a document. This is the place where authors throw all the elements and contents their visitors will reach. The body element is part of the basic structure of a document.
The body element had several presentational attributes in previous versions of HTML. These attributes have been deprecated before in favor of style sheets, and are now obsolete in HTML5. Authors are adviced to avoid their use.
Examples
The next example shows the basic structure of a webpage, including the body block.
<!DOCTYPE html>
<html>
<head>
<title>The beauty of life</title>
</head>
<body>
<h1>The beauty of life</h1>
<p>This morning I woke up feeling different...</p>
</body>
</html>
Attributes
Specific attributes
text
The default color for regular text inside the element.
This attribute was declared oblsolete in HTML5 for being merely presentaional in nature. Its use is no longer valid and authors are adviced to replace it with style sheets.
Example
<body text="#222222">
bgcolor
A color to fill the background of the element.
The bgcolor attribute has been removed from the HTML5 standard because of its presentational nature. Its results can be perfectly achieved with style sheets.
Example
<body bgcolor="#00ccee">
background
The URL of an image that will be used to cover the background of the element.
This attribute has become obsolete in HTML5 for being presentational in nature and its use is no longer valid. Authors should replace it with style sheets declarations.
Example
<body background="images/back.png">
link
The default color of the text in all links contained by the element.
The link attribute has become oblsolete in HTML5 due to its presentaional nature. The same results can be achieved by using style sheets.
Example
<body link="#0000ff">
vlink
The default color for links inside the element, that have already been visited.
This attribute became obsolete in the HTML5 stadard for being purely presentaional. Its results can be easily achieved using style sheet declarations.
Example
<body vlink="red">
alink
The default color that all a elements contained by this element will take when the mouse is over them.
This attribute has become obsolete in HTML5 because of its presentational nature and, therefore, its use is no longer valid. Authors should replace it with style sheets declarations.
Example
<body alink="green">
Global attributes
For information about global attributes refer to this list of global attributes in HTML5.
Events
Specific events
onafterprint
The user has just printed the document.
Example
<body onafterprint="alert('Document printed successfully!');">
onbeforeprint
The user has requested the document to be printed. This event fires exactly before the document is printed and may be used to confirm, delay or cancel the process.
Example
<body onbeforeprint="alert('Document is being sent to the printer!');">
onbeforeunload
The document is about to be unloaded (closed, removed). This event fires exactly before the document gets closed and may be used to confirm or delay the process.
Browsers will commonly use the return value of the function specified in this attribute to build the dialog box that will allow users to confirm or cancel the unload of the document.
Example
<body onbeforeunload="return 'Changes to the form will be lost. Are you sure you want to leave?';">
onhashchange
The part of the URL after the hash symbol ("#") has changed.
The part of the URL after the hash symbol ("#") refers to a part or section of the pointed document. Thanks to this feature, users can, for example, follow a link directly to a section of the document.
Example
<body onhashchange="alert('Currently viewing section: ' + location.hash);">
onlanguagechange
The preferred language of the user has changed.
Example
<body onlanguagechange="adaptToLanguageChange(); alert('The language of the document has changed!');">
onmessage
The current document has received a message.
In HTML5, documents and Web Workers have the possibility to send and recieve messages between each other. This opens a comunication channel between documents that can become very useful in web applications.
Example
<body onmessage="alert('Message received from another document: ' + event.data);">
onmessageerror
The current document has received a message that can't be deserialized.
In HTML5, documents and Web Workers have the possibility to send and recieve messages between each other. This opens a comunication channel between documents that can become very useful in web applications.
Example
<body onmessageerror="alert('There was an error while receiving a message')">
onoffline
The network connection has been lost.
This event can be very useful in web applications that depend on the network connection to work properly. These applications can take measures to mitigate the problems caused by a connection loss or inform the user about such drawbacks.
Example
<body onoffline="alert('Connection to the Internet has been lost!');">
ononline
The network connection has been restablished.
This event can be very useful in web applications that depend on the network connection to work properly. These applications can restart operations when this event is fired.
Example
<body ononline="alert('Connection to the Internet has been restablished!');">
onpagehide
The current document has been removed form visibility during a session history traversal (a backward/forward navigation).
Example
<body onpagehide="alert('You have moved on to another document in the sesion history');">
onpageshow
The current document has been shown during a session history traversal (a backward/forward navigation or refresh).
Example
<body onpageshow="alert('You've arrived to this document of the session history!');">
onpopstate
There's been a change of documents in the session history. This event is most commonly triggered by a backward/forward navigation.
Example
<body onpopstate="alert('You have moved from one document to another in the session history!');">
onrejectionhandled
A previously-unhandled promise rejection becomes handled.
onstorage
The data in a Web Storage area has changed.
Web Storage has been introduced in HTML5 as a replacement for cookies. It allows websites to store information in the visitor's machine and access it from any other document within the same website. Web Storage outperforms cookies in security, speed and capacity.
Example
<body onstorage="showInfoFromStorage();">
onunhandledrejection
A promise rejection goes unhandled.
onunload
The document is being removed or closed.
This event fires when the document has already begun closing, which prevents delays or requests for confirmations. Authors trying to prevent the closing of the document should consider using the onbeforeunload event.
Example
<body onunload="updateStorage('Unsaved fields');">
Global events
For information about global events refer to this list of global events in HTML5.