HTML <body> Tag
The <body> tag in HTML defines the main content of an HTML document. It serves as a container for all the visible elements, including text, images, links, and other multimedia. Think of it as the canvas where all your webpage's actual content resides and is rendered within the browser. It's a crucial element in creating a structured and functional web page.
Syntax
<body onload="script" onunload="script" >
Content of the web page
</body>
Attributes
| Attribute | Value | Description |
|---|---|---|
onload |
script | Specifies a script to run when the page has finished loading. |
onunload |
script | Specifies a script to run when the page is being unloaded (e.g., when the browser window or tab is closed). |
Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body >
<h1>Welcome to My Website</h1>
<p>This is the main content of my page. You'll find all kinds of great stuff here!</p>
</body>
</html>
More Examples
Example 1: Adding Simple Content
This example shows how to include headings, paragraphs, and a list within the <body>:
<!DOCTYPE html>
<html>
<head>
<title>Example Content</title>
</head>
<body>
<h1>A Heading</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
Example 2: Using JavaScript events (onload)
This example demonstrates the usage of onload event to perform any action when the body load is complete.
<!DOCTYPE html>
<html>
<head>
<title>Onload Event</title>
</head>
<body onload="alert('Page Loaded!')">
<h1>Page Content</h1>
<p>This demonstrates onload event.</p>
</body>
</html>
When you load this page in browser, it will show an alert message after page is fully loaded.
Example 3: Using JavaScript events (onunload)
This example demonstrates the usage of onunload event to perform any action when the page closes.
<!DOCTYPE html>
<html>
<head>
<title>Unload Event</title>
</head>
<body onunload="alert('Page Closed!')">
<h1>Page content</h1>
<p>This is demonstrating onunload event.</p>
</body>
</html>
Note: The onunload event may not be reliable and may not work on some modern browsers because, they don't allow JavaScript execution on page close.
Example 4: Combining Multiple Elements
This example show various common elements and their placement inside body tag
<!DOCTYPE html>
<html>
<head>
<title>Complex Layout</title>
</head>
<body>
<header>
<h1>Website Title</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<section>
<h2>Section Heading</h2>
<article>
<h3>Article Title</h3>
<p>Article content goes here.</p>
</article>
</section>
<aside>
<h3>Sidebar</h3>
<p>Additional information.</p>
</aside>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>
Browser Support
The <body> tag is supported by all major browsers, including:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- The
<body>tag should appear only once within an HTML document, after the<head>tag. - All content that you want to be visible to the user should be placed inside the
<body>element. - While
onloadandonunloadattributes exists, relying on them for crucial actions should be avoided because of inconsistent browser behavior. Use modern JavaScript events and page lifecycle hooks for reliable handling of these scenarios. - For complex layouts, consider using semantic HTML tags within the
<body>, such as<header>,<nav>,<main>,<section>,<article>,<aside>, and<footer>, to improve the structure and accessibility of your web page. - The
<body>tag should directly contain heading tags (h1-h6), paragraph tags (p), div tags and sections, aside tags etc instead of just raw text to maintain better readability and structure of HTML documents.
