Learning body Tag in HTML

Learning body Tag in HTML

4 mins readComment
Esha
Esha Gupta
Associate Senior Executive
Updated on Apr 8, 2024 13:21 IST

Do you know that the <body> tag in HTML is where all the magic of a webpage happens? It's the container that holds everything you see on a web page, including text, images, videos, and more. Let's understand more!

In HTML (Hypertext Markup Language), tags are the basic building blocks used to create web pages. They are used to define and structure the content of a webpage. In this blog, we will dive deeper into body tag in HTML.

Span Tag in HTML
Span Tag in HTML
Have you ever wondered how web developers style or manipulate specific parts of a webpage's text without affecting the whole document? This is where the tag in HTML comes into...read more

All About br Tag in HTML
All About br Tag in HTML
Have you ever wondered how to create a simple line break in your HTML content? The tag is your solution. It's a self-closing element used to insert line breaks,...read more

Learning div Tag in HTML
Learning div Tag in HTML
Have you ever wondered what keeps web pages organized and styled consistently? The HTML tag plays a crucial role in this. It's a versatile, block-level element used primarily as...read more

Learning ul Tag in HTML
Learning ul Tag in HTML
Have you ever wondered how to organize items on a webpage without any specific order neatly? The HTML tag is the solution, designed to create unordered lists with bullet...read more

All About meta Tag in HTML
All About meta Tag in HTML
Have you ever wondered how web pages communicate important information to browsers and search engines? HTML tags play a pivotal role in this process. They reside in the head...read more

Table of Content

 

What is a body Tag in HTML?

The <body> tag in HTML is a fundamental element that represents the content section of an HTML document. It is where all the visible contents of a web page, such as text, images, links, tables, lists, and other elements, are placed. The <body> tag follows the <head> tag and is a direct child of the <html> tag in an HTML document structure.

Syntax of body Tag in HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Metadata, title, link to CSS, and other elements go here -->
</head>
<body>
    <!-- All visible webpage content goes here -->
    <p>This is a paragraph in the body of the HTML document.</p>
    <!-- More content: text, images, links, etc. -->
</body>
</html>
The syntax of the <body> tag in HTML is straightforward. It forms the main content of your HTML document and is placed after the <head> tag within the <html> tag. The <body> tag contains all the contents of an HTML document, such as text, images, links, and other elements that are displayed in the web browser.

Usage of HTML body Tag with Examples

Example 1: Basic Text and Image Content

Problem Statement: Create a simple webpage with a heading, a paragraph, and an image.


 
<!DOCTYPE html>
<html>
<head>
<title>Basic Webpage</title>
</head>
<body>
<!-- Heading -->
<h1>Welcome to My Webpage</h1>
<!-- Paragraph -->
<p>This is a simple webpage with text and an image.</p>
<!-- Image -->
<img src="example.jpg" alt="Example Image">
</body>
</html>
Copy code

Output

Example 2: Creating a Navigation Bar

Problem Statement: Add a navigation bar with links to different sections.


 
<!DOCTYPE html>
<html>
<head>
<title>Webpage with Navigation</title>
</head>
<body>
<!-- Navigation Bar -->
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
<!-- Content sections -->
<section id="home"><h2>Home</h2></section>
<section id="about"><h2>About</h2></section>
<section id="contact"><h2>Contact</h2></section>
</body>
</html>
Copy code

Output

Example 3: Embedding a Video

Problem Statement: Embed a video into the webpage.


 
<!DOCTYPE html>
<html>
<head>
<title>Webpage with Video</title>
</head>
<body>
<!-- Embedding a video -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Copy code

Output

Example 4: Adding a Form

Problem Statement: Include a form for user feedback.


 
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
</head>
<body>
<!-- Feedback Form -->
<form action="/submit-feedback">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="feedback">Feedback:</label>
<textarea id="feedback" name="feedback"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Copy code

Output

Example 5: Styling Content with CSS

Problem Statement: Apply CSS styles to the body content.


 
<!DOCTYPE html>
<html>
<head>
<title>Styled Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<!-- Styled Heading -->
<h1>Styled Webpage</h1>
<!-- Paragraph -->
<p>This webpage has styled elements.</p>
</body>
</html>
Copy code

Output

 

Top 62+ HTML Interview Questions and Answers for 2024
Top 62+ HTML Interview Questions and Answers for 2024
Here are the HTML interview questions most likely to be asked during the interviews. This list also covers some HTML CSS interview questions to help you start or move ahead...read more

How to Create HTML Forms – Tutorial with Examples
How to Create HTML Forms – Tutorial with Examples
HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information...read more

HTML Attributes Explained with Examples
HTML Attributes Explained with Examples
HTML attributes provide additional information about HTML elements. They are used to modify the behavior or appearance of an element. Attributes are specified within the opening tag of an element...read more

Creating HTML Links – Tutorial With Examples

HTML Lists: Ordered and Unordered Lists Explained with Examples
HTML Lists: Ordered and Unordered Lists Explained with Examples
This tutorial explains how to create different types of lists: unordered, ordered, and description lists in HTML. In this blog, you will learn what are HTML lists and understand how...read more

Knowing nav Tag in HTML
Knowing nav Tag in HTML
Have you ever wondered how websites organize their menus and links for easy navigation? The HTML tag is the key for this which is specifically designed to define navigation...read more

Mastering Button Tag in HTML
Mastering Button Tag in HTML
Have you ever wondered how interactive buttons on websites are created? They're often made using the HTML tag, which allows developers to add clickable elements for various actions like...read more

All About anchor Tag in HTML
All About anchor Tag in HTML
Have you ever wondered how web pages are interconnected, allowing you to easily click and navigate from one page to another? This is made possible by the HTML anchor ()...read more

Key Takeaways

  • The <body> tag in HTML is the primary container for all the visible content of a web page. It holds everything that is displayed in the browser window, including text, images, videos, links, forms, and other interactive elements.

  • The <body> tag is a fundamental part of the HTML document structure. It comes after the <head> tag and encapsulates the entire page content, serving as a key structural element in web development.

  • The contents within the <body> tag can be styled using CSS, and the tag itself can include attributes for styling or scripting purposes. This makes it an essential element for defining the look and behaviour of a web page.

  • The <body> tag supports a wide range of content types, from basic text and images to complex multimedia and interactive forms. This allows developers to create diverse and dynamic web pages.

FAQs

What is the purpose of the body tag in HTML?

The body tag in HTML is used to define the body of the HTML document, which is the area where all the visible contents like text, images, links, tables, and other elements are placed. Everything displayed in the web browser window (except for the contents of the head tag) is enclosed within the body tag.

Can a HTML document have multiple body tags?

No, an HTML document should have only one body tag. According to HTML standards, the document should contain one head and one body element. Having multiple body tags is not valid HTML and can result in unpredictable rendering by web browsers.

What attributes can be used with the body tag?

While the body tag supports various global attributes (like class, id, style, etc.), it also supports some specific attributes like bgcolor (background color), text (text color), link (color of links), etc. However, the use of these specific attributes is considered outdated and CSS should be used instead for styling.

How is the body tag different from the head tag?

The head tag in HTML is used to contain metadata, script links, style sheets, and other information that is not visible to the user. In contrast, the body tag encloses the content of the document that is visible to the user in the web browser.

Is it mandatory to use the body tag in HTML5?

While the body tag is not technically mandatory in HTML5 (the browser will assume its presence even if it is omitted), it is considered good practice to explicitly include it for readability and clarity of the HTML structure. It helps to clearly define the scope of the main content and is essential for semantic and accessible web design.

About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio