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

</>
Copy
<!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>
Example for Basic Structure of the <body> Tag

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

</>
Copy
<!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>
Styling the <body> Tag with CSS

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

</>
Copy
<!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

</>
Copy
<!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>
body with Background Image Example