<body>

Defines the document's body (contains all visible content)

Standard HTML

Definition and Usage

The <body> element establishes the document's body, which contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

There can only be one <body> element in an HTML document. All visible content that appears in the browser window is contained within the <body> tag.

Important: The <body> tag must be the second element inside the <html> tag, following the <head> tag.

Note: You can only have ONE <body> tag per HTML document. Multiple body tags will result in invalid HTML.

HTML Document Structure

<!DOCTYPE html>
<html>
  <head>
    <!-- Metadata, title, links, scripts -->
  </head>
  <body>
    <!-- All visible content goes here -->
  </body>
</html>

Browser Support

The <body> tag is supported in all major browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

Event Attributes

The <body> tag supports several important window event attributes:

Attribute	Value	Description
onload	script	Fires when the page has finished loading
onunload	script	Fires when the user is leaving the page
onbeforeunload	script	Fires before the document is about to be unloaded
onhashchange	script	Fires when the anchor part of the URL changes
onresize	script	Fires when the browser window is resized
onscroll	script	Fires when the document scrolls
onafterprint	script	Fires after the document is printed
onbeforeprint	script	Fires before the document is printed

Deprecated Attributes (Do Not Use)

The following attributes were used in HTML 4 but are NOT supported in HTML5. Use CSS instead:

Attribute	Old Purpose	Use CSS Instead
bgcolor	Background color	`background-color` property
background	Background image	`background-image` property
text	Text color	`color` property
link	Link color	`a { color: value; }`
alink	Active link color	`a:active { color: value; }`
vlink	Visited link color	`a:visited { color: value; }`

Examples

Basic HTML Document Structure

Complete HTML document with body tag:

Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is the main content of the page.</p>
</body>
</html>

Using onload Event

Execute JavaScript when the page loads:

Example
<!DOCTYPE html>
<html>
<head>
  <title>Page Load Example</title>
</head>
<body onload="alert('Welcome! The page has loaded.')">
  <h1>Hello World</h1>
  <p>This page shows an alert when it loads.</p>
</body>
</html>

Modern onload with JavaScript

Better practice using JavaScript event listener:

Example
<!DOCTYPE html>
<html>
<head>
  <title>Modern Page Load</title>
  <script>
    window.addEventListener('load', function() {
      console.log('Page has fully loaded');
      // Initialize your app here
    });
  </script>
</head>
<body>
  <h1>Content Here</h1>
</body>
</html>

Styling Body with CSS

Modern approach using CSS instead of deprecated attributes:

Example
<!DOCTYPE html>
<html>
<head>
  <title>Styled Page</title>
  <style>
    body {
      background-color: #f5f5f5;
      color: var(--text-primary);
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Styled Content</h1>
  <p>This page uses CSS for styling, not deprecated attributes.</p>
</body>
</html>

Body with Background Image

Adding a background image using CSS:

Example
<!DOCTYPE html>
<html>
<head>
  <title>Background Image</title>
  <style>
    body {
      background-image: url('background.jpg');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      color: white;
    }
  </style>
</head>
<body>
  <h1>Content with Background</h1>
</body>
</html>

Body with onresize Event

Respond to window resize events:

Example
<!DOCTYPE html>
<html>
<head>
  <title>Resize Handler</title>
  <script>
    function handleResize() {
      document.getElementById('size').textContent =
        window.innerWidth + ' x ' + window.innerHeight;
    }
  </script>
</head>
<body onresize="handleResize()" onload="handleResize()">
  <h1>Window Size: <span id="size"></span></h1>
  <p>Resize the browser window to see changes.</p>
</body>
</html>

Full Document Structure with Semantic HTML

Complete example with modern semantic elements:

Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic Structure</title>
  <style>
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <header>
    <h1>Site Header</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
    </nav>
  </header>

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

  <footer>
    <p>© 2024 My Website</p>
  </footer>
</body>
</html>

Body with Multiple Event Handlers

Combining multiple events:

Example
<!DOCTYPE html>
<html>
<head>
  <title>Multiple Events</title>
  <script>
    function pageLoaded() {
      console.log('Page loaded');
    }

    function pageScrolled() {
      console.log('Page scrolled');
    }

    function beforeLeaving(e) {
      e.returnValue = 'Are you sure you want to leave?';
      return e.returnValue;
    }
  </script>
</head>
<body onload="pageLoaded()"
      onscroll="pageScrolled()"
      onbeforeunload="beforeLeaving(event)">
  <h1>Event Handling Demo</h1>
  <p style="padding-bottom: 2000px;">Scroll to trigger events.</p>
</body>
</html>

Try it Yourself

Interactive Example

This entire page is wrapped in a <body> tag. Try opening your browser's developer tools (F12) and inspect the body element to see its properties.

Current Window Size:

Try in Code Playground

Body vs Main Element

Element	Purpose	Usage
<body>	Contains ALL visible content of the document	One per document, wraps everything visible including header, nav, main, footer, etc.
<main>	Contains the MAIN/PRIMARY content unique to the document	One per page, excludes repeated content like headers, footers, sidebars

Example Structure
<body>
  <header>Site-wide header</header>
  <nav>Site-wide navigation</nav>

  <main>
    <!-- Primary content unique to this page -->
    <h1>Page Title</h1>
    <article>Main content here</article>
  </main>

  <aside>Sidebar content</aside>
  <footer>Site-wide footer</footer>
</body>

Best Practices

One body per document: Every HTML document should have exactly one <body> tag
Use CSS for styling: Never use deprecated attributes like bgcolor, text, link, etc.
Semantic HTML inside body: Use proper semantic elements like <header>, <main>, <footer>
Event handlers best practice: Use JavaScript addEventListener instead of inline event attributes
Accessibility: Ensure proper document structure with heading hierarchy and landmarks
Performance: Place scripts at the end of body or use defer/async attributes
Mobile-first: Include viewport meta tag in head for responsive design
Valid HTML: Always start with <!DOCTYPE html> declaration

Common CSS Properties for Body

CSS Property	Example Value	Purpose
margin	0	Remove default browser margins
padding	20px	Add internal spacing
font-family	Arial, sans-serif	Set default font for entire page
line-height	1.6	Improve text readability
color	#333	Set default text color
background-color	#ffffff	Set page background color
background-image	url('bg.jpg')	Add background image
min-height	100vh	Ensure body fills viewport height

Document Structure Best Practices

Recommended HTML5 Structure
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Page description">
  <title>Page Title</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Skip to main content link for accessibility -->
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <!-- Site header -->
  <header role="banner">
    <h1>Site Name</h1>
    <nav role="navigation">
      <!-- Navigation links -->
    </nav>
  </header>

  <!-- Main content -->
  <main id="main-content" role="main">
    <article>
      <h2>Article Title</h2>
      <p>Content here...</p>
    </article>
  </main>

  <!-- Sidebar (optional) -->
  <aside role="complementary">
    <!-- Related content -->
  </aside>

  <!-- Site footer -->
  <footer role="contentinfo">
    <p>© 2024 Company Name</p>
  </footer>

  <!-- Scripts at end for better performance -->
  <script src="script.js" defer></script>
</body>
</html>

Related Tags

<html>
Defines the root of an HTML document
<head>
Contains metadata and document information
<main>
Defines main content of document
<header>
Defines header for document or section
<footer>
Defines footer for document or section
<nav>
Defines navigation links