Path // www.yourhtmlsource.com → Reference → <body>

<body>

The <body> element contains all the visible content of an HTML document. Everything that users see and interact with on a webpage, including text, images, videos, forms, and interactive elements, lives inside the <body> element. There can only be one <body> element per document.

Page Navigation:
Syntax | Attributes | Examples | When to Use | Related Elements

This page was last updated on 2025-11-27

Syntax

Attributes

onload - JavaScript to run when the page finishes loading (better to use addEventListener in scripts)
onunload - JavaScript to run when the page is unloaded
onbeforeunload - JavaScript to run before the page unloads
class - CSS classes for styling the entire page
id - Unique identifier for the body element

Note: Presentational attributes like bgcolor, text, link, vlink, and alink are deprecated. Use CSS instead.

Examples

Basic page structure:

<body>
<h1>Welcome to My Website</h1>
<p>This is the main content of the page.</p>
</body>

Semantic page layout:

<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <article>
      <h1>Article Title</h1>
      <p>Article content...</p>
    </article>
  </main>
  <footer>
    <p>Copyright 2024</p>
  </footer>
</body>

Body with class for page-specific styling:

When to Use

Every HTML document must have exactly one <body> element. It should come after the closing </head> tag and contain all content meant to be rendered by the browser.

Best practices:

Structure content using semantic HTML5 elements like <header>, <main>, <footer>, <article>, and <section>
Use CSS for all visual styling rather than deprecated body attributes
Add classes to the body for page-specific styling or JavaScript functionality
Place scripts at the end of the body (before </body>) or use defer attribute in the head to avoid blocking page rendering
Ensure all content is accessible and properly structured for screen readers
Avoid inline event handlers; use external JavaScript files instead