<body>

Since:		HTML 4(1997)

The <body> element represents the main content of an HTML document. All visible content — text, images, links, and more — goes inside the <body> element.

Syntax

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <!-- Write the content displayed on the page here -->
  <h1>Heading</h1>
  <p>Paragraph text.</p>
</body>
</html>

Common tags used inside <body>

Tag	Description
<header>	Represents the header of a page or section. Typically contains a logo and navigation.
<nav>	Represents a group of navigation links.
<main>	Represents the main content of the page. Use only once per page.
<article>	Represents self-contained content such as a blog post or news article.
<section>	Represents a thematic grouping of content within a document.
<aside>	Represents supplementary content related to the main content, such as a sidebar.
<footer>	Represents the footer of a page or section. Typically contains copyright information.
<div>	A generic block-level container with no semantic meaning. Commonly used for layout purposes.

Sample Code

sample_body.html

View sample page

<!-- Standard page layout using semantic elements -->
<body>
  <!-- Header -->
  <header>
    <h1>Site Name</h1>
    <nav>
      <a href="/?lang=en">Home</a>
      <a href="/about/?lang=en">About</a>
    </nav>
  </header>

  <!-- Main content -->
  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article body text.</p>
    </article>
  </main>

  <!-- Footer -->
  <footer>
    <p>© 2025 Site Name</p>
  </footer>
</body>

<!-- With sidebar and JavaScript loaded at the end of body -->
<body>
  <header>
    <h1>Programming Tutorial Site</h1>
    <nav>
      <a href="/?lang=en">Home</a>
      <a href="/html/?lang=en">HTML</a>
      <a href="/css/?lang=en">CSS</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>HTML Basics</h2>
      <section>
        <h3>What are tags?</h3>
        <p>HTML uses tags to structure a document.</p>
      </section>
    </article>

    <!-- Sidebar -->
    <aside>
      <h2>Related Articles</h2>
      <ul>
        <li><a href="/css/?lang=en">CSS Basics</a></li>
        <li><a href="/js/?lang=en">JavaScript Basics</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2025 Programming Tutorial Site</p>
  </footer>

  <!-- JS at the end of body avoids blocking HTML rendering -->
  <script src="main.js"></script>
</body>

Result

The browser renders the site name heading, navigation links, article title, body text, and footer copyright notice in order.

View sample page

Notes

It is recommended to structure the content inside <body> using semantic HTML5 elements such as <header>, <nav>, <main>, and <footer>. This helps screen readers and search engines understand the structure of your page correctly.

When you need a container purely for layout with no semantic meaning, use the <div> element. For content that carries meaning, it is worth considering the appropriate semantic element.

It is common practice to load JavaScript files at the end of <body>, just before the closing </body> tag. This prevents JavaScript from blocking HTML rendering and helps pages load faster.

Event Handling via body Attributes

The <body> element supports event attributes for page-level lifecycle events. In modern development, attaching event listeners via JavaScript is the preferred approach.

Attribute	Description
onload	Fires when the page and all its resources (including images) have finished loading.
onunload	Fires when the user leaves the page or closes the window.
onresize	Fires when the browser window is resized.
onscroll	Fires when the page is scrolled.

<!-- Recommended: attach events via JavaScript -->
<body>
  <p id="status">Loading...</p>

  <script>
    // Fires after all resources have loaded
    window.addEventListener("load", function() {
      document.getElementById("status").textContent = "Ready!";
    });

    // Fires when the window is resized
    window.addEventListener("resize", function() {
      console.log("Width: " + window.innerWidth + "px");
    });

    // Fix header after scrolling 100px
    window.addEventListener("scroll", function() {
      var header = document.getElementById("site-header");
      if (window.scrollY > 100) {
        header.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
      }
    });
  </script>
</body>

CSS Layout Patterns Rooted in body

Applying CSS to the <body> element lets you set the font, spacing, and background color for the entire page at once. Combining it with flexbox lets you stick the footer to the bottom of the viewport.

/* Base styles for the whole page */
body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #f8f8f8;
}

/* Sticky footer layout */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1; /* main expands to fill remaining space */
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }
}

About Script Placement

Browsers pause HTML rendering while loading and executing JavaScript. Writing a <script> tag without defer or async can cause the page to appear to freeze at that point.

There are three common approaches for placing scripts.

Place before </body> (traditional approach)

Since all HTML elements are parsed before the script executes, there is no render blocking.

<body>
  <h1>Content</h1>
  <p>Body text</p>
  <script src="app.js"></script>
</body>

Place in <head> with the defer attribute

The defer attribute downloads the JavaScript file in parallel with HTML parsing, then executes it after the HTML is fully loaded. It does not block rendering, and multiple deferred scripts are executed in the order they appear. This is the most widely used approach today.

<head>
  <script src="app.js" defer></script>
</head>

Place in <head> with the async attribute

The async attribute also downloads in parallel, but executes the script immediately after the download finishes. Execution order is not guaranteed, so this is best suited for independent scripts that do not depend on other scripts (such as analytics tags).

<head>
  <script src="analytics.js" async></script>
</head>

In some cases, such as polyfills or theme switching, scripts need to run before the page renders. In those situations, placing a <script> in <head> without defer or async is appropriate. Choose the method based on your specific needs.

Common Mistakes

Nesting body inside body

An HTML document can only have one <body> element. Writing multiple <body> tags causes the browser to auto-correct the markup, which can result in an unexpected document structure.

<body>
  <h1>Title</h1>
  <body>
    <p>Content</p>
  </body>
</body>

The same logic can also be written as:

<body>
  <h1>Title</h1>
  <p>Content</p>
</body>

Browser Compatibility

Desktop

Chrome

1 and later ○

Firefox

1 and later ○

Safari

1 and later ○

Edge

12 and later ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 and later ○

14 and earlier ×

Mobile

iOS Safari

1 and later ○

Android Browser

4.4 and later ○

4 and earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

* Version data based on MDN.

If you find any errors or copyright issues, please contact us.

Home

HTML Dictionary

<body>

Syntax

Common tags used inside <body>

Sample Code

sample_body.html

Result

Notes

Event Handling via body Attributes

CSS Layout Patterns Rooted in body

About Script Placement

Place before </body> (traditional approach)

Place in <head> with the defer attribute

Place in <head> with the async attribute

Common Mistakes

Nesting body inside body

Browser Compatibility