HTML body Tag - Show Visible Content in the body Element | HTML Tags List

HTML body tag with examples

Beginner

The <body> tag is one of several important tags the developer places in every HTML document.

HTML Tags Reference

1. About the body tag

The <body> tag is the part of the document visible to the user. So all sections, lines, colors, images, code boxes and text are located within the <body> element. Its primary purpose is to act as a container for other tags.

The <body> tag and its contents are styled using CSS. Most commonly, developers use an external CSS file and use a <link> tag to point to it within the <head> tag section of the HTML document.

Many webmasters without the budget and knowledge to fine-tune visuals and create interactive websites employ front-end frameworks, like Bootstrap. These frameworks provide the structure for how the web page is laid out; including, fonts, colors and other lightly interactive elements. Content Management Systems like WordPress offer templates for the same purpose.

2. Syntax for the body tag

The <body> tag is for the visual parts of the web page. While technically there are scnearios in which the beginning <body> tag and ending </body> tag are not required, it is advised to use both.

The <body> element must be the second element within the <html> root tag, after the <head> tag section.

As the container for the visual elements on the web page, the <body> tag section is often the largest section of the HTML document.

So at an absolute minimum, an HTML document will look like this.

<!DOCTYPE html> <html> <head> <title> </title> </head> <body></body> </html>

3. Settings for the body tag

As with all tags, Global Attributes can always be set.

Below is a series of optional attributes that can be associated with events that occur in the <body> element. These will execute a specified function and can be kicked off with or without interaction by the user.

Attribute	Purpose
`onafterprint`	After the user printed a document
`onbeforeprint`	Before the user prints a document
`onbeforeunload`	Before a document is to be unloaded
`onblur`	When the document loses the focus
`onerror`	When there is an error in loading the document
`onfocus`	When the document gains the focus
`onhashchange`	When the hash character # in the web address changed
`onload`	When the document loaded completely
`onmessage`	When a document receives a message
`onoffline`	After a failure in network communication
`ononline`	After network communication has been restored
`onpopstate`	When a user navigates the session history
`onredo`	When a user hit redo in their transaction history
`onresize`	When the document window is resized
`onstorage`	After changes are made to data storage area called Web Storage
`onundo`	When a user hit undo in their transaction history
`onunload`	When the document is unloading or closing

In previous versions of HTML, styling attributes for the <body> element were valid, however with HTML5 these moved to CSS. The remaining attributes above are associated with events.

Also, some users find the events above to be annoying, so use them sparingly.

Default behaviors

Each user-agent (browser) has its own stylesheet per se. This dictates how that browser styles each element by default. The Chrome browser styles the <body> element using the following specifications.

body { display: block; margin: 8px; }

4. Examples of the body tag

Example 1 - Run a script after the page loads

The following code will run a script called welcomeScript.js just after the <body> tag has loaded.

<!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> </head> <body onload="welcomeScript.js"></body> </html>

For convenience it is common to include scripts used for multiple pages of a website in a file and place it in a sub-directory off the root called /js.

HTML body Tag Reference and Examples