Body Tag: Visible Content

Learn about the <body> tag, which contains all the visible content of the page.

Introduction

<body> contains all the visible content! Let's learn about it!

What You Will Learn

What the <body> tag is
What goes inside <body>
Common elements you can use

What is `<body>`?

<body>:

Contains all visible content
What users see and interact with
Comes <head>
Only one <body> per page

What Goes in `<body>`?

Everything visible!

Headings: <h1> to <h6>
Paragraphs: <p>
Lists: <ul>, <ol>, <li>
Links: <a>
Images: <img>
Tables: <table>
Forms: <form>
Divs: <div>
Semantic elements: <header>, <nav>, <main>, <footer>, etc.

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>...</nav>
    </header>
    
    <main>
        <article>
            <h2>Welcome!</h2>
            <p>This is the page.</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
    
    <script src="script.js"></script>
</body>
</html>

Body Attributes (Rarely Used Now)

Old attributes used to have presentation attributes on <body> like:

bgcolor - background color
text - text color
link - link color
alink - active link
vlink - visited link

Don't use these - use CSS instead!

Best Practices

✅ Put all visible content in <body> ✅ Put <script> tags at end of <body> ✅ Use semantic HTML elements ✅ Keep <body> well-organized ✅ Proper indentation

Common Mistakes

❌ Putting content outside <body>

<html>
    <p>Hello!</p>  <!-- Wrong! -->
    <body>...</body>
</html>

❌ Multiple <body> tags

<body>...</body>
<body>...</body>  <!-- No! Only one! -->

❌ Using old body attributes

<body bgcolor="white" text="black">  <!-- Use CSS instead! -->

FAQs

**Q: Can I have multiple <body> tags? A: No, only one <body> per page.

**Q: What if I forget <body>? A: Browsers might still work, but always include it!

**Q: Where do I put <script>? A: Best at the end of <body>!

Summary

<body> contains all the visible content of the page!

Next Topic

Now let's learn about Title Tag!

← Back to Syllabus