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 <bpdy> tag:
| Attribute | Description | HTML Compatibility |
|---|---|---|
| align | Color of text for selected hyperlinks | Depreciated in HTML 4.01, Obsolete in HTML 5, 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 HTML 5, use CSS |
| link | Color of text for unvisited hyperlinks | Depreciated in HTML 4.01, Obsolete in HTML 5, use CSS |
| onafterprint | Function to call user has printed document | HTML 5 |
| onbeforeprint | Function to call when user requests document to be printed | HTML 5 |
| onbeforeunload | Funtion to call when document is to be unloaded | HTML 5 |
| onblur | Function to call when document has lost focus | HTML 5 |
| onerror | Function to call when document fails | HTML 5 |
| onfocus | Function to call when document has focus | HTML 5 |
| onhaschange | Function to call when fragment identifier portion of document's address has changed | HTML 5 |
| onload | Function to call when document has loaded | HTML 5 |
| onmessage | Function to call when the document received a message | HTML 5 |
| onoffline | Function to call when Network communication fails | HTML 5 |
| ononline | Function to call when Network communication is restored | HTML 5 |
| onpopstate | Function to call when user navigated session history | HTML 5 |
| onredo | Function to call when user moved forward in undo history | HTML 5 |
| onresize | Function to call when document was resized | HTML 5 |
| onstorage | Function to call when storage area changed | HTML 5 |
| onundo | Function to call when user moved backward in undo history | HTML 5 |
| onunload | Function to call when document is being unloaded | HTML 5 |
| text | Foreground color of text | Depreciated in HTML 4.01, Obsolete in HTML 5, use CSS |
| vlink | Color of text for visited hyperlinks | Depreciated in HTML 4.01, Obsolete in HTML 5, 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)
- IE Phone
- 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 HTML 5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
HTML 5 Document
If you created a new web page in HTML 5, your <body> tag might look like this:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML 5 Example by www.techonthenet.com</title> </head> <body> <h1>Heading</h1> <p>This is the content.</p> </body> </html>
In this HTML 5 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.
No comments:
Post a Comment