HTML <body> Tag – Visible Page Content
📌 Introduction
The <body> tag contains all the content that is visible to users in the browser.
Everything you see on a webpage is inside the <body>, such as:
- Text
- Images
- Links
- Buttons
- Forms
🧱 Basic Syntax
<body>
<!-- Visible content goes here -->
</body>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my website.</p>
<button>Click me</button>
</body>
</html>
🖥️ Output Explanation
The browser will display:
- A heading: Welcome
- A paragraph: This is my website.
- A button: "Click me"
Everything shown comes from the <body> section.
🎯 What Goes Inside <body>
Common elements:
- Headings (
<h1>→<h6>) - Paragraphs (
<p>) - Images (
<img>) - Links (
<a>) - Lists (
<ul>,<ol>) - Forms (
<form>)
⚠️ Important Rules
- Only one
<body>tag per page - Must be inside
<html> - Comes after
<head>
✔ Correct structure:
<html>
<head></head>
<body></body>
</html>
⚡ Attributes of <body>
Example:
<body style="background-color: lightgray;"></body>
✔ You can apply styles directly (not recommended for large projects)
⚠️ Tips & Best Practices
- Keep your content well organized
- Use semantic tags (
<header>,<section>,<footer>) inside<body> - Avoid inline styles → use CSS instead
- Place
<script>at the end of<body>for better performance
🚫 Common Mistakes
- Adding content outside
<body>❌ - Using multiple
<body>tags ❌ - Mixing structure and styling too much ❌
🧪 Mini Exercise
Create a page with:
- A heading
- A paragraph
- A button
Then:
- Add another section with your name and goals