<body> - Document Body Element

The `<body>` Element

Content Container HTML 2.0

The <body> element contains all the visible content of an HTML document, including text, images, links, tables, lists, and all interactive elements. Everything users see and interact with on a webpage is contained within the <body> element.

Quick Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is the visible content that appears in the browser.</p>
  <button>Click Me</button>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is the visible content that appears in the browser.</p>
  <button>Click Me</button>
</body>
</html>

Syntax

<body>
  <!-- All visible page content goes here -->
</body>

Attributes

Element-Specific Attributes

The <body> element has several event handler attributes, though most are legacy and better handled with JavaScript:

Attribute	Description	Modern Alternative
`onload`	Script to run when page loads	Use `addEventListener('load')`
`onunload`	Script to run when page unloads	Use `addEventListener('beforeunload')`
`onbeforeunload`	Script before page unloads	Use `addEventListener('beforeunload')`
`onresize`	Script when window is resized	Use `addEventListener('resize')` on window
`onscroll`	Script when page is scrolled	Use `addEventListener('scroll')`

Global Attributes

This element supports all global attributes.

Common Use Cases

Basic Page Structure

The <body> typically contains semantic structure elements:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Well-Structured Page</title>
</head>
<body>
<header>
  <h1>My Website</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
  </article>
</main>

<footer>
  <p>&copy; 2025 My Website</p>
</footer>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Well-Structured Page</title>
</head>
<body>
<header>
  <h1>My Website</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
  </article>
</main>

<footer>
  <p>&copy; 2025 My Website</p>
</footer>
</body>
</html>

Complete Layout Example

A typical webpage layout with header, navigation, main content, sidebar, and footer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog Layout</title>
<style>
  body { font-family: system-ui; margin: 0; }
  header { background: #333; color: white; padding: 1rem; }
  nav { background: #555; padding: 0.5rem; }
  nav a { color: white; margin-right: 1rem; text-decoration: none; }
  main { padding: 1rem; }
  footer { background: #eee; padding: 1rem; text-align: center; }
</style>
</head>
<body>
<header>
  <h1>My Blog</h1>
</header>

<nav>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
  <a href="/contact">Contact</a>
</nav>

<main>
  <article>
    <h2>Blog Post Title</h2>
    <p>This is a blog post with interesting content.</p>
  </article>
</main>

<footer>
  <p>Copyright &copy; 2025</p>
</footer>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog Layout</title>
<style>
  body { font-family: system-ui; margin: 0; }
  header { background: #333; color: white; padding: 1rem; }
  nav { background: #555; padding: 0.5rem; }
  nav a { color: white; margin-right: 1rem; text-decoration: none; }
  main { padding: 1rem; }
  footer { background: #eee; padding: 1rem; text-align: center; }
</style>
</head>
<body>
<header>
  <h1>My Blog</h1>
</header>

<nav>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
  <a href="/contact">Contact</a>
</nav>

<main>
  <article>
    <h2>Blog Post Title</h2>
    <p>This is a blog post with interesting content.</p>
  </article>
</main>

<footer>
  <p>Copyright &copy; 2025</p>
</footer>
</body>
</html>

Dynamic Content Loading

Using the body’s load event (modern approach with JavaScript):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Content</title>
</head>
<body>
<h1>Page Loading...</h1>
<div id="content"></div>

<script>
  // Modern approach: addEventListener
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('content').innerHTML = '<p>Content loaded!</p>';
  });
</script>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Content</title>
</head>
<body>
<h1>Page Loading...</h1>
<div id="content"></div>

<script>
  // Modern approach: addEventListener
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('content').innerHTML = '<p>Content loaded!</p>';
  });
</script>
</body>
</html>

Styling the Body

The <body> element is commonly styled to set page-wide defaults:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Body</title>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(to bottom, #f0f0f0, #ffffff);
    min-height: 100vh;
  }
</style>
</head>
<body>
<h1>Styled Page</h1>
<p>This page has custom body styling for a consistent look.</p>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Body</title>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(to bottom, #f0f0f0, #ffffff);
    min-height: 100vh;
  }
</style>
</head>
<body>
<h1>Styled Page</h1>
<p>This page has custom body styling for a consistent look.</p>
</body>
</html>

Best Practices

Use Semantic HTML Inside Body

Structure your body content with semantic elements rather than generic divs:

<!-- Good: Semantic structure -->
<body>
  <header>
    <nav><!-- navigation --></nav>
  </header>
  <main>
    <article><!-- content --></article>
    <aside><!-- sidebar --></aside>
  </main>
  <footer><!-- footer --></footer>
</body>

<!-- Avoid: Non-semantic divs -->
<body>
  <div class="header">
    <div class="nav"><!-- navigation --></div>
  </div>
  <div class="content"><!-- content --></div>
  <div class="footer"><!-- footer --></div>
</body>

Reset Default Margins

Browsers apply default margins to the body. Reset them for better control:

body {
  margin: 0;
  padding: 0;
}

Avoid Inline Event Handlers

<!-- Avoid: Inline event handlers -->
<body onload="init()">

<!-- Better: JavaScript addEventListener -->
<body>
  <script>
    document.addEventListener('DOMContentLoaded', init);
  </script>
</body>

Single Body Element

An HTML document must have exactly one <body> element:

<!-- Wrong: Multiple body elements -->
<html>
  <body>First body</body>
  <body>Second body</body>
</html>

<!-- Correct: Single body -->
<html>
  <head>...</head>
  <body>All content here</body>
</html>

Document Structure Pattern

A well-structured body typically follows this pattern:

<body>
  <!-- 1. Skip link for accessibility -->
  <a href="#main" class="skip-link">Skip to main content</a>

  <!-- 2. Site header -->
  <header>
    <nav><!-- Main navigation --></nav>
  </header>

  <!-- 3. Main content area -->
  <main id="main">
    <!-- Page-specific content -->
  </main>

  <!-- 4. Site footer -->
  <footer>
    <!-- Footer content -->
  </footer>

  <!-- 5. Scripts at end for performance -->
  <script src="app.js"></script>
</body>

Accessibility

Landmark Regions

Use proper landmark elements within the body to create an accessible page structure:

<body>
  <!-- banner landmark (implicit from <header>) -->
  <header>
    <h1>Site Title</h1>
    <!-- navigation landmark -->
    <nav>
      <a href="/">Home</a>
    </nav>
  </header>

  <!-- main landmark -->
  <main>
    <h2>Page Content</h2>
  </main>

  <!-- contentinfo landmark (implicit from <footer>) -->
  <footer>
    <p>Copyright info</p>
  </footer>
</body>

Provide skip links at the start of the body for keyboard users:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessible Page</title>
<style>
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
  }
  .skip-link:focus {
    top: 0;
  }
</style>
</head>
<body>
<a href="#main" class="skip-link">Skip to main content</a>

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

<main id="main">
  <h1>Main Content</h1>
  <p>This is the primary content of the page.</p>
</main>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessible Page</title>
<style>
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
  }
  .skip-link:focus {
    top: 0;
  }
</style>
</head>
<body>
<a href="#main" class="skip-link">Skip to main content</a>

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

<main id="main">
  <h1>Main Content</h1>
  <p>This is the primary content of the page.</p>
</main>
</body>
</html>

ARIA Roles

The <body> element has no implicit ARIA role. Use semantic elements within the body instead:

<body>
  <!-- Use semantic elements, not ARIA on body -->
  <header role="banner"><!-- if needed for older browsers --></header>
  <main role="main"><!-- if needed for older browsers --></main>
  <footer role="contentinfo"><!-- if needed for older browsers --></footer>
</body>

Browser Support

Browser	Version
Chrome	All versions
Firefox	All versions
Safari	All versions
Edge	All versions
IE	All versions

The root element containing head and body. Learn more →

Contains document metadata. Learn more →

Represents the main content of the body. Learn more →

Introductory content or navigation. Learn more →

Common Mistakes

Content Outside Body

<!-- Wrong: Content outside body -->
<html>
  <head><title>Page</title></head>
  <h1>This won't display correctly</h1>
  <body>
    <p>Body content</p>
  </body>
</html>

<!-- Correct: All content inside body -->
<html>
  <head><title>Page</title></head>
  <body>
    <h1>This displays correctly</h1>
    <p>Body content</p>
  </body>
</html>

Deprecated Background Attributes

<!-- Avoid: Deprecated attributes -->
<body bgcolor="#ffffff" background="bg.jpg" text="#000000">

<!-- Use CSS instead -->
<body style="background-color: #ffffff; background-image: url('bg.jpg'); color: #000000;">

<body> - Document Body Element

The `<body>` Element

Quick Example

Syntax

Attributes

Element-Specific Attributes

Global Attributes

Common Use Cases

Basic Page Structure

Complete Layout Example

Dynamic Content Loading

Styling the Body

Best Practices

Use Semantic HTML Inside Body

Reset Default Margins

Avoid Inline Event Handlers

Single Body Element

Document Structure Pattern

Accessibility

Landmark Regions

Skip Navigation Links

ARIA Roles

Browser Support

Common Mistakes

Content Outside Body

Deprecated Background Attributes

Specifications

<body> - Document Body Element

The <body> Element

Quick Example

Syntax

Attributes

Element-Specific Attributes

Global Attributes

Common Use Cases

Basic Page Structure

Complete Layout Example

Dynamic Content Loading

Styling the Body

Best Practices

Use Semantic HTML Inside Body

Reset Default Margins

Avoid Inline Event Handlers

Single Body Element

Document Structure Pattern

Accessibility

Landmark Regions

Skip Navigation Links

ARIA Roles

Browser Support

Related Elements

Common Mistakes

Content Outside Body

Deprecated Background Attributes

Specifications

The `<body>` Element