Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

The HTML BODY tag

By Stephen Bucaro

The opening <body> and closing </body> tag create the container for all the html elements that can be viewed in the Web browser window. The body tag has several attributes that are in common use but the W3C (World Wide Web Consortium) does not recommend using these attributes because they are "deprecated". Deprecated means at some point in the future they will no longer be supported by Web browsers.

The W3c recommends to instead use style rules to apply properties to the body tag. However, I believe because the Web contains millions of old webpages that use these attributes, and thousands of new webpages are being created each day using the body tag attributes, they will be supported long into the future.

Two common body tag attributes are leftmargin and topmargin. Both Internet Explorer and Firefox set default margins for the webpage body, but those default margins may not be the size you desire, or you may wish to set one or both of those margins to 0 (zero). The example shown below sets the leftmargin and topmargin to 4 pixels.

Another common body tag attribute is bgcolor. The bgcolor attribute sets the background color of the webpage. There are many charts of hundreds of color names on the Web, but only 16 color names are recognized by the W3C. If you use acolor name with the body tag bgcolor attribute, be sure to test it with the Web browsers that you intend to support. The example below sets the webpage background color to light blue.

You can also use hexidecimal color notation with the body tag bgcolor attribute. All browsers support all colors defined with hexidecimal notation. The example below uses hexidecimal notation to set the webpage background color to #add8e6. #add8e6 is hexidecimal notation for the color light blue.

The body tag background attribute can be used to set a webpage's background to a texture or image. The background attribute is set to the path and file name of the image file. The image will be tiled across the webpage's background. The example below sets the webpage background to an image.

Along with specifying an image with the body tag background attribute, you can also include the bgproperties attribute. The bgproperties attribute set with the value "fixed" causes the tiled background image to remain stationary while the webpage text is scrolled. This results in a pretty cool effect. The example below sets the body tag's bgproperties attribute to "fixed".

Another common body tag attribute is text. The text attribute sets the color of the webpage text. Similar to the bgcolor attribute, the tag attribute can be set to a color name or hexidecimal notation for the color. The example below sets the webpage text color to blue.

The most commonly use body tag attribute is not an attribute at all, but an event. Although the body tag supports all the common document events, the most commonly defined event is the onload event. The onload event is used to call a script immediately after the webpage has been loaded. The example below shows how to set the body tag's onload event.

Note that the body tag events are not deprecated, but the body tag attributes are, so instead of using those attributes, you should set the body properties with style definitions. An example of setting style for the document body is shown below.

<style>
body
{
margin-left:4px;
margin-top:4px;
background-image:url("fairie1.gif");
background-attachment:fixed;
font-family:verdana;
font-size:20px;
color:red;
}
</style>

This style block would be placed in the <head> section of the webapge. Note that the style properties do not have the same names as the html attributes.

More HTML Code:
• Line Breaks in HTML
• Use fieldset to Organize Form Elements
• Text Input Box Basics
• Set Form Controls Tab Order With tabindex Attribute
• HTML title Tag
• When to Use the nofollow Attribute value
• Providing Alternate and Title Text for an Image
• Make an HTML Element Editable
• HTML5 Spinbox Control
• Aligning an Image on Your Web Page