HTML <body> Element: Complete Guide

What Is the <body> Element?

The <body> element is the second child of <html>, following the <head>. Everything the visitor actually sees on a webpage lives inside it — every heading, paragraph, image, link, form, and interactive element.

A minimal document with a body looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <h1>Hello, world!</h1>
    <p>This content lives in the body.</p>
</body>
</html>

Nothing visible appears unless it is inside <body>. That single rule determines where every piece of content goes.

What the element represents

Syntax and Anatomy

The <body> element is a normal, non-void element. It has an opening tag, content (all the page’s visible elements), and a closing tag.

<body id="page" class="theme-light">
    <!-- all visible content goes here -->
</body>

Here is the structure broken down:

Where the <body> Element Sits

The <body> element is the second child of <html>, coming right after the <head>. Nothing appears between them.

The head comes first because browsers need metadata (character encoding, viewport, stylesheets) before rendering. The body comes second because it contains the content that the metadata describes.

Body vs Head vs html

These three elements are easy to confuse. Here is the difference in one table.

A simple way to remember it: <html> is the container for everything, <head> is the invisible part, and <body> is what the visitor actually sees.

What Goes Inside the Body

The body accepts almost anything. Here is the full list of content types you can put inside it, grouped by purpose.

Structuring the Body with Semantic Landmarks

A modern body is usually organized into semantic landmarks. These elements describe what each part of the page is, which helps screen readers, search engines, and other developers understand your structure instantly.

Here is the same structure in real HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Structured Body Example</title>
</head>
<body>

    <header>
        <h1>My Website</h1>
        <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
        </nav>
    </header>

    <main>
        <article>
            <h2>A blog post</h2>
            <p>The body of the article goes here.</p>
        </article>
        <aside>
            <p>Related links and side notes.</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2025 Inar Learn</p>
    </footer>

</body>
</html>

This structure is instantly readable. A screen reader can jump between landmarks, a search engine can identify the main content, and a developer can find what they need without scrolling through a wall of <div> tags.

What each landmark means

Attributes on the <body> Element

The <body> element accepts every global attribute — id, class, style, data-*, and so on. It also historically accepted event handler attributes.

Global attributes you might use

Event handler attributes (legacy)

Older HTML allowed event handlers like onload and onscroll directly on the body element. These still work, but they mix behavior with structure and are discouraged in modern code.

The modern approach is to attach event listeners in JavaScript. This keeps behavior separate from structure and makes the code easier to test.

<!-- Instead of <body onload="init()"> -->
<body>
    <script>
        window.addEventListener("load", function () {
            console.log("Page loaded");
        });
    </script>
</body>

Obsolete presentational attributes

Older HTML had presentational attributes on the body — bgcolor, background, text, link, vlink, alink, and marginwidth. All of these are obsolete.

All presentational attributes are handled by CSS today. Mixing them into HTML is a sign of code written before about 2010.

Styling the Body with CSS

The <body> element is one of the most common places to set global defaults for a page. Properties like font family, text color, and background color are usually defined there so they cascade to every descendant.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Styling the Body</title>
    <style>
        body {
            font-family: system-ui, sans-serif;
            font-size: 16px;
            line-height: 1.7;
            color: #0f172a;
            background: #f8fafc;
            max-width: 720px;
            margin: 0 auto;
            padding: 40px 20px;
        }
    </style>
</head>
<body>
    <h1>A styled page</h1>
    <p>The font, color, and spacing come from CSS on the body element.</p>
</body>
</html>

Because the body is the root of all visible content, setting a property on it applies to everything inside by inheritance. This is why the body is often called “the global default container.”

Common CSS properties on the body

Where Scripts Go in the Body

Scripts are often placed at the very end of the body, right before the closing </body> tag. This ensures the HTML has been parsed and the DOM is ready before the script runs.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Script at the End</title>
</head>
<body>
    <h1>Page Title</h1>
    <button id="myBtn">Click me</button>

    <script>
        document.getElementById("myBtn").addEventListener("click", function () {
            alert("Button clicked!");
        });
    </script>
</body>
</html>

The <script> element is one of the last things in the body because it is the last thing the browser needs. The page renders first, then the script runs.

A Complete Document

Here is a full, well-formed HTML document showing the body in its proper place with a complete structure of landmarks, semantic content, and a script.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A Complete HTML Document</title>
</head>
<body>

    <header>
        <h1>My Website</h1>
        <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
        </nav>
    </header>

    <main>
        <h2>Welcome</h2>
        <p>
            This document uses the body element as the container for
            all visible content, following the standard HTML file structure.
        </p>
    </main>

    <footer>
        <p>&copy; 2025 Inar Learn</p>
    </footer>

</body>
</html>

That is the whole pattern. Every page you build will follow it, with varying content inside the body.

Common <body> Mistakes

A handful of mistakes come up again and again with the body element. Here are the ones to watch for.

1. Putting visible content outside the body

2. Forgetting the closing tag

3. Adding a second body element

4. Using obsolete presentational attributes

5. Using onload instead of addEventListener

6. Scripts before the DOM is ready

7. Multiple main elements

8. Forgetting the body entirely

Best Practices

A few habits make the body of a page clean, accessible, and easy to maintain.

Key Takeaways

• The <body> element contains all visible content — everything the visitor sees, reads, or interacts with.
• It is the second child of <html>, following the <head>.
• Every document has exactly one body, and it must have both an opening and a closing tag.
• The body accepts almost any content: text, links, media, lists, tables, forms, and semantic landmarks.
• Use semantic landmarks like <header>, <nav>, <main>, and <footer> to structure the body meaningfully.
• A page should have exactly one visible <main> element wrapping its primary content.
• Global CSS defaults — font, color, background, margin — are typically set on the body element.
• Scripts belong at the end of the body, right before </body>.
• Obsolete attributes like bgcolor and onload should be replaced with CSS and addEventListener.
• Validate your HTML to catch missing body tags, multiple body elements, or content placed outside the body.

What to Learn Next

Now that you understand the <body> element, the next step is to learn the parent and sibling elements. Start with HTML <head> Element: Complete Guide for the invisible metadata container, then explore HTML <html> Element: Syntax and Examples and HTML File Structure.

For deeper coverage, explore HTML Elements, HTML Attributes, and HTML Nesting Explained. To understand how the browser renders the body, read How Web Browsers Work and How Websites Work.

Practice Challenge

Build a complete, well-structured HTML page that exercises the body element in every way covered in this guide. Your page should include:

• A <!DOCTYPE html> and an <html lang="en"> root element
• A head with <meta charset>, a <meta viewport> tag, and a <title>
• A <body> element containing a <header> with a heading and a <nav>
• A single <main> element with at least one <article> and one <section>
• An <aside> element with a small side note
• A <footer> with copyright text
• A <style> block in the head that sets font-family, background, color, and margin: 0 on the body
• A <script> at the very end of the body, just before </body>

Once your page is complete, open it in DevTools and inspect the DOM. Confirm that the <body> element is the second child of <html>, that the landmarks are nested inside it, and that the script is at the end.

As a final test, run the page through the W3C validator. A clean result means your body structure is correct — and you have mastered the container that holds every visible element on the web.