FactorPad
Faster Learning Tutorials

HTML body tag

Within the body tags sit content users see in their web browser or mobile device.
  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.
by Paul Alan Davis, December 26, 2017
Updated: December 18, 2018
That's how we'll learn about the body tag, so let's get going.

Outline Back Next

~/ home  / tech  / html5  / reference  / html body tag


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. Subscribe here.

  • For the complete HTML tag list, click Outline.
  • To learn about the <head> tag, click Back.
  • To learn about the <meta> tag, click Next.

Outline Back Next

~/ home  / tech  / html5  / reference  / html body tag



 
 
Keywords:
html body
html body tag
html body element
html body tag attributes
html body tag events
html body style
elements in body
html body examples
html body defaults