All Courses (6)

Master's Degree (2)

Fellowship (2)

Certifications (2)

Woolf University

Top Rated

MS in Computer Science: Machine Learning and Artificial Intelligence

Woolf University

Popular

MS in Computer Science: Cloud Computing with AI System Design

Vishlesan I-Hub, IIT Patna

Professional Fellowship in Data Science and Agentic AI Engineering

Vishlesan I-Hub, IIT Patna

Professional Fellowship in Software Engineering with AI and DevOps

IBM & Microsoft

Advanced Certification in Data Analytics & Gen AI Engineering

IBM & Microsoft

Advanced Certification in Web Development & Gen AI Engineering

Your Success, Our Mission!

3000+ Careers Transformed – Be Next!

Your Success, Our Mission!

3000+ Careers Transformed.

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: 30th November, 2024

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:




My Web Page

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




My Web Page


Welcome to my web page
This is the main content of my web page.

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

Example 2: Adding an image




My Web Page


Welcome to my web page
This is the main content of my web page.

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

Example 3: Setting the background color




My Web Page


Welcome to my web page
This is the main content of my web page.

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

Example 4: Adding a Table




My Web Page


Welcome to my web page
This is the main content of my web page.

  
    
    
  
  
    
    
  
  
    
    
  Name Age
Alice 25
Bob 30

Name	Age
Alice	25
Bob	30

Output:

A simple table displaying the names and ages of individuals.

Example 5: Adding a Video




My Web Page


Welcome to my web page
This is the main content of my web page.

  
  Your browser does not support the video tag.

Output:

A video player that displays a video named example.mp4 with controls to play, pause, and adjust the volume.

Example 6: Adding a Form




My Web Page


Contact Us

  Name:

  


  Email:

Output:

A simple contact form with fields for a name and email address.

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 of body attributes in HTML:

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

Example:

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

Example:

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

Example:

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

Example:

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

Example:

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

Example:

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

Example:

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 HTML body tag, you can create effective and dynamic web pages.

Key Takeaways on the Body Tag in HTML

The <body> tag in HTML defines the main content of a web page that is visible to users.
Content inside the <body> tag can include text, images, videos, links, forms, tables, and other HTML elements.
Attributes such as background, text, link, vlink, alink, and style help customize the appearance and interactivity of the web page.
The <body> tag supports dynamic behavior through attributes like onload and inline CSS for styling.
Structuring content effectively within the <body> tag improves both the readability and accessibility of a web page.
By incorporating multimedia elements, tables, and forms, developers can create engaging and user-friendly designs.

Quiz

What is the purpose of the <body> tag in HTML?
a) To define the metadata of a web page
b) To define the visible content of a web page
c) To create hyperlinks on a web page
d) To define the style of a web page
Answer: b) To define the visible content of a web page
Which of the following is NOT a valid attribute of the <body> tag?
a) background
b) text
c) href
d) onload
Answer: c) href
How do you set a background color for the <body> tag in HTML?
a) <body bg-color="lightblue">
b) <body style="background: lightblue;">
c) <body bgcolor="lightblue">
d) <body style="background-color: lightblue;">
Answer: d) <body style="background-color: lightblue;">
What happens if the <body> tag is omitted in an HTML document?
a) The browser will display an error message.
b) The browser will not render any content.
c) The browser will render the content inside the <html> tag as the body content.
d) The browser will only render metadata.
Answer: c) The browser will render the content inside the <html> tag as the body content.
Which <body> attribute is used to execute JavaScript code after the page is fully loaded?
a) onstart
b) onready
c) onload
d) onsubmit
Answer: c) onload

Module 2: HTML5 Basics