<body>
Definition
The <body>
element in HTML is used to define the main content of an HTML document. This element wraps all the other content on the page, including text, images, and other media. It is the section of the document that is visible to the user when the page is loaded in a web browser.
The <body>
element is also a block-level element, meaning that it takes up the full width of its parent container and creates a new line after it. It can be styled using CSS to change the font, color, and other visual properties of the content within it.
Examples
<!DOCTYPE html>
<html>
<head>
<title>Body Element Demo</title>
</head>
<body>
<h1>Body Element Demo</h1>
<p>This is a demo of using the body element in an HTML document.</p>
</body>
</html>
Attributes
Attribute | Description | Deprecated |
---|---|---|
onload | Specifies a script to be executed when the body has finished loading | No |
onunload | Specifies a script to be executed when the user exits the document | No |
onbeforeunload | Specifies a script to be executed when the user is about to leave the document | No |
onfocus | Specifies a script to be executed when the body element gets focus | No |
onblur | Specifies a script to be executed when the body element loses focus | No |
onscroll | Specifies a script to be executed when the user scrolls the document | No |
onresize | Specifies a script to be executed when the user resizes the window | No |
background | Specifies a background image for the document body | Yes, use CSS instead |
bgcolor | Specifies the background color for the document body | Yes, use CSS instead |
text | Specifies the text color for the document body | Yes, use CSS instead |
link | Specifies the color of links in the document body | Yes, use CSS instead |
vlink | Specifies the color of visited links in the document body | Yes, use CSS instead |
alink | Specifies the color of active links in the document body | Yes, use CSS instead |
marginheight | Specifies the top and bottom margins of the body element | Yes, use CSS instead |
marginwidth | Specifies the left and right margins of the body element | Yes, use CSS instead |
topmargin | Specifies the top margin of the body element | Yes, use CSS instead |
leftmargin | Specifies the left margin of the body element | Yes, use CSS instead |
rightmargin | Specifies the right margin of the body element | Yes, use CSS instead |
bottommargin | Specifies the bottom margin of the body element | Yes, use CSS instead |
vspace | Specifies the vertical space around the body element | Yes, use CSS instead |
hspace | Specifies the horizontal space around the body element | Yes, use CSS instead |
bgproperties | Specifies whether the background image is fixed or scrolls with the document | Yes, use CSS instead |
Best Practices
There are several best practices to keep in mind when using the <body>
element in HTML. Some of these include:
- Using appropriate headings to structure the content on the page. This can be done using the
<h1>
to<h6>
elements, which define different levels of headings. - Using descriptive link text. Links on a web page should clearly describe where they will take the user when clicked.
- Providing alternative text for images using the
alt
attribute. This text will be read by screen readers and will provide a description of the image for users who are unable to see it. - Using semantic HTML elements to markup the content on the page. This means using elements like
<p>
for paragraphs,<ul>
for unordered lists, and<table>
for tables, rather than using generic<div>
elements for all content.
Browser Compatibility
Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |