totn HTML

HTML: <body> tag

This HTML tutorial explains how to use the HTML element called the <body> tag with syntax and examples.

Description

The HTML <body> tag defines the main content of the HTML document or the section of the HTML document that will be directly visible on your web page. This tag is also commonly referred to as the <body> element.

Syntax

In HTML, the syntax for the <body> tag is:

<body>
</body>

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <body> tag:

Attribute Description HTML Compatibility
alink Color of text for selected hyperlinks Depreciated in HTML 4.01, Obsolete in HTML5, use CSS
background Image to be used a background Depreciated in HTML 4.01, Obsolete in HTM L5, use CSS
bgcolor Background color Depreciated in HTML 4.01, Obsolete in HTML5, use CSS
link Color of text for unvisited hyperlinks Depreciated in HTML 4.01, Obsolete in HTML5, use CSS
onafterprint Function to call user has printed document HTML5
onbeforeprint Function to call when user requests document to be printed HTML5
onbeforeunload Funtion to call when document is to be unloaded HTML5
onblur Function to call when document has lost focus HTML5
onerror Function to call when document fails HTML5
onfocus Function to call when document has focus HTML5
onhaschange Function to call when fragment identifier portion of document's address has changed HTML5
onload Function to call when document has loaded HTML5
onmessage Function to call when the document received a message HTML5
onoffline Function to call when Network communication fails HTML5
ononline Function to call when Network communication is restored HTML5
onpopstate Function to call when user navigated session history HTML5
onredo Function to call when user moved forward in undo history HTML5
onresize Function to call when document was resized HTML5
onstorage Function to call when storage area changed HTML5
onundo Function to call when user moved backward in undo history HTML5
onunload Function to call when document is being unloaded HTML5
text Foreground color of text Depreciated in HTML 4.01, Obsolete in HTML5, use CSS
vlink Color of text for visited hyperlinks Depreciated in HTML 4.01, Obsolete in HTML5, use CSS

Note

  • The HTML <body> element is found within the <html> tag.
  • The most common elements to be placed in the HTML <body> tag are: <h1>, <p>, <div>, <table> tags.

Browser Compatibility

The <body> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <body> tag below, exploring examples of how to use the <body> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <body> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading</h1>
<p>This is the content.</p>
</body>

</html>

In this HTML5 Document example, the <body> tag contains two elements - a heading found in the <h1> tag and a paragraph found in the <p> tag.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <body> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading</h1>
<p>This is the content.</p>
</body>

</html>

In this HTML 4.01 Transitional Document example, the <body> tag contains two elements - a heading found in the <h1> tag and a paragraph found in the <p> tag.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <body> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Transitional Example</title>
</head>

<body>
<h1>Heading</h1>
<p>This is the content.</p>
</body>

</html>

In this XHTML 1.0 Transitional Document example, the <body> tag contains two elements - a heading found in the <h1> tag and a paragraph found in the <p> tag.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <body> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading</h1>
<p>This is the content.</p>
</body>

</html>

In this XHTML 1.0 Strict Document example, the <body> tag contains two elements - a heading found in the <h1> tag and a paragraph found in the <p> tag.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <body> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading</h1>
<p>This is the content.</p>
</body>

</html>

In this XHTML 1.1 Document example, the <body> tag contains two elements - a heading found in the <h1> tag and a paragraph found in the <p> tag.

Share on: