FactorPad
Build a Better Process

HTML body Tag Reference and Examples

Within the body tags sit content users see in their web browsers or mobile devices.
  1. About - Understand the purpose of the body tag.
  2. Syntax - Describe how it is used.
  3. Settings - View required and optional attributes plus default behaviors.
  4. Examples - Review common examples.
face pic by Paul Alan Davis, CFA
Updated: February 23, 2021
That's how we'll learn about the HTML body tag, so let's get going.

Outline Back Tip Next

/ factorpad.com / tech / html5 / reference / html-body-tag.html


An ad-free and cookie-free website.


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.


Other Related HTML Content

The <body> tag is paired with other essential tags that should be included in every HTML document.


What's Next?

We also have a growing YouTube page if you prefer video tutorials. Follow @factorpad on Twitter for reminders.

Outline Back Tip Next

/ factorpad.com / tech / html5 / reference / html-body-tag.html


html body
html body tag
html body element
body tag in html
html body tag attributes
html body style
how to use the html body element
elements in the body
html body examples
what is the html body element
html body tag events
html body defaults

A newly-updated free resource. Connect and refer a friend today.