HTML <body> Tag
The HTML <body>
tag defines the main content of an HTML document that is displayed in the browser. All visible content, such as text, images, videos, and other elements, must be placed inside the <body>
tag.
The <body>
tag is a required element in an HTML document and is used within the <html>
tag.
Basic Structure of the <body> Tag
Below is a basic example of an HTML document using the <body>
tag:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Body Tag Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph inside the body tag.</p>
</body>
</html>
Attributes of HTML <body> Tag
The <body>
tag supports several attributes that control the document’s appearance and behavior:
- background: Specifies the URL of an image file to set as the background (deprecated in HTML5).
- bgcolor: Specifies the background color of the document (deprecated in HTML5).
- text: Sets the color of the text (deprecated in HTML5).
- link: Specifies the color of hyperlinks (deprecated in HTML5).
- vlink: Specifies the color of visited hyperlinks (deprecated in HTML5).
- alink: Specifies the color of active hyperlinks (deprecated in HTML5).
In modern HTML5, these attributes are replaced by CSS for better flexibility and maintainability.
Styling the <body> Tag with CSS
The <body>
tag can be styled using CSS to control its background, text color, margin, padding, and more:
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f000;
color: #333;
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h1>Styled Body Tag</h1>
<p>This is a styled document with customized body properties.</p>
</body>
</html>
Special Cases for HTML <body> Tag
Using JavaScript with the <body> Tag
You can use the onload
or onunload
attributes to execute JavaScript when the document is loaded or unloaded:
index.html
<!DOCTYPE html>
<html>
<head>
<script>
function showAlert() {
alert('Welcome to the page!');
}
</script>
</head>
<body onload="showAlert()">
<h1>JavaScript Example</h1>
<p>An alert will be shown when the page is loaded.</p>
</body>
</html>
body with Background Image Example
In older HTML versions, you could add a background image using the background
attribute. However, it is recommended to use CSS for this purpose in modern HTML:
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1>Background Image Example</h1>
<p>This document has a background image applied using CSS.</p>
</body>
</html>