When we are talking about the HTML body tag, it is everything that your webpage contains, paragraphs, headers, hyperlinks, and more, rendered on the webpage, which users can see.
The <body> tag here contains the elements that are rendered live on the webpage, everything displayed on the website. Here, we will understand how to use the HTML tag and its significance on the webpage.
What is the HTML body Tag?
The <body> tag defines the content of a webpage containing everything that is displayed or rendered on the live page, including headings, images, hyperlinks, paragraphs, tables, lists, and more. It is like a container for the elements inside the document.
- The body tag in an HTML document defines the body of a webpage, including all elements displayed on the website.
- The HTML body tag begins with an opening <body> tag and closes with a </body> tag.
- Every HTML document includes the HTML <body> tag.
- The <body> tag in every HTML document is unique, i,e., there can only be one <body> tag in an HTML document.
- If you do not use the <body> tag in your HTML document, most browsers will display content as tags, which is not considered good practice.
- The HTML body tag is supported by all modern browsers, including Chrome, Safari, Mozilla Firefox, Opera Mini, and more.
The HTML <body> Tag Syntax
The <body> tag in HTML is kept inside the <html> document. The syntax of the HTML <body> tag is simple and easy to implement.
| <body> content of webpage </body> |
Structure of the HTML <body> Tag
The <body> tag generally comes after the <head> or <script> tags in an HTML document. It is kept inside the <html> tag, enclosing all major elements inside a webpage.
| <!DOCTYPE html>
<html lang= “en”> <body> <h1> Welcome to PW Skills </h1> <h3> Begin your Career with 1:1 Mentorship and Career Guidance </h3> <p> You can enroll for our courses on the official website! </p> </body> </html> |
Output
 |
Why use the HTML <body> Tag?
The HTML body tag is used to include all important elements that need to be visible on the webpage. It contains everything that users see and interact with in the browser.
- It contains all visible elements inside, including tables, videos, links, buttons, images, text, and more.
- It separates content from the HTML document metadata.
- Without the <body> tag, many HTML elements might not display or behave correctly.
- It also allows event handling, such as onresize, onunload, onload, and more.
The HTML <body> Tag Attributes
The <body> tag supports specific attributes, global attributes, and event attributes.
| Attribute Name | Purpose |
| id | This attribute is used to give a unique ID to the body. |
| class | This adds one or more CSS classes. |
| style | This adds inline CSS styling to an HTML element. |
| lang | It defines the page language. |
| dir | It sets the text direction, either from left to right or right to left. |
| data-* | It adds custom data attributes for JS. |
| onload | It runs JavaScript when the page loads. |
| onunload | The onunload attribute runs JavaScript when leaving the page. |
| onresize | It runs JavaScript on window resize. |
| bgcolor | This attribute sets the background color |
Where to Include the <body> Tag in HTML?
The HTML <body> tag is inside the <html> tag, after the <head> or <script> tag. You will see all visible content of a webpage inside this tag.
| <!DOCTYPE html>
<html> <head> <title>My Webpage</title> </head> <body> <!– All visible content goes here –> <h1>Hello, World!</h1> <p>This is my webpage.</p> </body> </html> |
Check this example above, you can see the exact placement of the <body> tag. The hierarchy is
- The <html> comes first as it is the first element or root element.
- The <head> contains the title, CSS, metadata, links, scripts, and more
- After the <head> section, the <body> tag is used, where it holds all the visible elements of the webpage.
Read More: HTML article Tag: Definition, Syntax, And Examples
What Elements Are Inside the HTML <body> Tag?
The <body> tag contains various elements inside that are visible on the webpage. Let us check some of the major <body> tag elements below.
1. Headings
These elements are used to highlight the title, subtitle, subheadings, and more on a webpage. It defines the structure of your content. You can use the most important <h1> tag to the least important <h6>. There are six HTML heading tags available. They are generally used for creating hierarchy in content and improving SEO performance.
| <body>
<h1> Welcome to PW Skills </h1> <h3> Begin your Career with 1:1 Mentorship and Career Guidance </h3> </body> |
The two above are heading tags <h1> and <h3> used in an HTML document to define titles or other important headings.
2. Paragraphs
The paragraph element in HTML is used to display blocks of text and organise the written content in a readable format. It uses an opening <p> tag and closes with a </p> tag.
| <body>
<h1> Welcome to PW Skills </h1> <h3> Begin your Career with 1:1 Mentorship and Career Guidance </h3> <p> You can enroll for our courses on the official website! </p> </body> |
Here, the <p> tag is used to enclose the sentence “You can enroll for our courses on the official website!”.
3. Links
The link tag <a> in HTML is used to create a hyperlink to other pages on the same website or to other websites. The <a> tag includes the href attribute and the target attribute to specify the direction and address of the destination.
| <body>
<h1> Welcome to PW Skills </h1> <h3> Begin your Career with 1:1 Mentorship and Career Guidance </h3> <a href= “https://pwskills.com” target= “_blank”> Visit our Official Website.</a> </body> |
Output
 |
4. Lists
The list element in HTML is used to display items in an ordered or unordered manner. It improves the readability of the content and helps group items together. There are two main types of lists in HTML.
- Unordered lists (<ul>)
- Ordered lists (<ol>)
| <body>
<h1> Welcome to PW Skills </h1> <h3> Begin your Career with 1:1 Mentorship and Career Guidance </h3> <ul> <li>Learn from Industry Experts</li> <li>Real-World Projects</li> <li>Job Assistance Program</li> </ul> </body> |
Output
 |
5. Images
The image tag in HTML is used to enclose an image, icon, graphics, and more. You need to provide a URL to make it work. The image tag is a self-closing tag.
| <body>
<h1> Welcome to PW Skills </h1> <h3> Begin your Career with 1:1 Mentorship and Career Guidance </h3> <img src=”https://sample-image.png” alt=”Sample Image” style=”width:100%; height:auto; border-radius:8px;”> </body> |
The <img> tag is used here, and you can include the image URL inside the “src” attribute of this <img> tag
6. Tables
The <table> tag is used to include a table in the webpage content, containing rows and columns inside. You can set the rows and columns based on the number you decide. Let us take a simple example.
| <body>
<h1> Welcome to PW Skills </h1> <h3> Begin your Career with 1:1 Mentorship and Career Guidance </h3> <img src=”https://sample-image.png” alt=”Sample Image” style=”width:100%; height:auto; border-radius:8px;”> </body> |
Output
 |
HTML body Tag FAQs
Q1. What is the HTML tag?
Ans: The HTML body tag is used to include all the visible content on the webpage, including headings, paragraphs, links, images, tables, and more.
Q2. Can there be more than one tag?
Ans: The tag is unique to each HTML document, and there cannot be more than one tag.
Q3. What are the different types of lists in HTML?
Ans: There are two types of lists in HTML, including unordered lists and ordered lists.
Q4. Can I use an HTML document without a body tag?
Ans: Yes, an HTML document needs to have a body tag inside, as it is not a good practice to display all other elements freely without a body tag.
Q4. What is the HTML body tag used for?
Ans: The HTML body tag is used to contain all elements that are visible on a webpage. Webpages contain texts, images, links, videos, audios, and more.
