Free

Practice

New

Placements

New

About Us

home bytes tutorials html body tag in html

Course Outline

HTML5 Document Structure

HTML5 Elements and Attributes

HTML Head Tag

Body Tag in HTML

HTML Elements: Inline vs Block

Body Tag in HTML

Last Updated: 22nd June, 2023

Introduction

The body tag in HTML is used to define the main content of a web page. It is placed between the <html> and </html> tags, and contains all the visible content of the web page, including text, images, links, and other elements. The body tag represents the main container for all the content that the user will see when they visit the web page.

The structure of the body tag

The body tag has a simple structure. It is defined with the <body> opening tag, followed by the content of the web page, and then the </body> closing tag. Here is an example of the body tag structure:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>

The content between the <body> and </body> tags is where all the visible content of the web page will go. This can include text, images, videos, links, and other HTML elements.

Usage of the body tag

The body tag is used to define the main content of a web page, including text, images, links, and other HTML elements. It is also used to define the background color or image of the web page. The body tag can also include attributes, such as the background color, text color, and link color.

The body tag can also include other HTML elements, such as headings, paragraphs, lists, images, and tables. These elements are used to structure and format the content of the web page.

Examples of the body tag in HTML

Here are some examples of how the body tag is used in HTML:

Example 1: Basic web page structure

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to my web page</h1>
<p>This is the main content of my web page.</p>
</body>
</html>

In this example, the body tag contains a heading and a paragraph that represent the main content of the web page.

Example 2: Adding an image

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to my web page</h1>
<p>This is the main content of my web page.</p>
<img src="image.jpg" alt="My Image">
</body>
</html>

In this example, the body tag contains an image element that displays an image named "image.jpg".

Example 3: Setting the background color

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body style="background-color: lightblue;">
<h1>Welcome to my web page</h1>
<p>This is the main content of my web page.</p>
</body>
</html>

In this example, the body tag includes a style attribute that sets the background color of the web page to light blue.

Commonly used attributes in body tag

There are several commonly used attributes that can be applied to the <body> tag in HTML. Here are some examples:

background: This attribute sets the background color or image of the web page.

Example:

<body background="background.jpg">

text: This attribute sets the default text color for the web page.

Example:

<body text="black">

link: This attribute sets the default color of hyperlinks that have not been visited.

Example:

<body link="blue">

vlink: This attribute sets the default color of hyperlinks that have been visited.

Example:

<body vlink="purple">

alink: This attribute sets the color of hyperlinks when they are clicked.

Example:

<body alink="red">

onload: This attribute specifies a JavaScript function to run when the web page is loaded.

Example:

<body onload="myFunction()">

style: This attribute allows you to apply CSS styles to the <body> tag and its contents.

Example:

<body style="background-color: #F0F0F0; color: #333;">

By using these attributes, you can customize the appearance and behavior of your web page to fit your needs. However, it's important to use them judiciously and avoid overusing or abusing them, as this can lead to problems with accessibility, usability, and maintainability.

Conclusion

The body tag is an essential HTML element that defines the main content of a web page. It is used to structure and format the content, including text, images, links, and other HTML elements. By understanding the structure and usage of the body tag, you can create effective and dynamic web pages.

Module 2: HTML5 Basics