<body> Document body
Everything visible on the page lives inside body.
Headings, paragraphs, images, links, forms: whatever people see and click goes in <body>. A page has exactly one, right after the <head>.
Old pages put attributes such as bgcolor or background on the body. Those are obsolete now, and CSS does the job. Forget the body tags and the browser adds them for you, though writing them keeps the structure readable.
The event handler attributes it accepts, such as onload, are listed under the body element in the HTML Living Standard (opens in a new tab). For how to organize what goes inside, see the Header, Nav, Main, Footer lesson.
Syntax
<body>
<h1>Heading</h1>
<p>Content</p>
</body>When to use it
Everything visible lives in the body, from the site header to the copyright line, so this is where the real decisions happen. Put repeated parts in <header>, <nav> and <footer> and the page's own content in <main>. A body stuffed with anonymous divs tells browsers and screen readers nothing.
For page-wide CSS such as font, line height and margins, the body is a handy hook. Browsers give it an 8px margin by default, which is why so many stylesheets open with body{margin:0}. A class on it, like class="page-contact", lets one shared stylesheet adjust a single page without extra files.
Content written after the closing </body> tag is not really outside. Paste a tracking snippet at the very end of a file and the parser moves it back into the body, and the file fails validation. There is no valid place after the body, so end-of-page scripts go right before </body>. The header, nav, main and footer lesson builds the inner structure.
Live example
Edit the code and watch the preview.
<!doctype html>
<html lang="en">
<head>
<title>Body demo</title>
</head>
<body>
<h1>Welcome</h1>
<p>Everything you can see lives in the body.</p>
</body>
</html>More examples
A full page structure
Inside the body, the page is split into the usual landmarks: a header with the site name and menu, a main area with the unique content, and a footer. Screen reader users can jump between these parts instead of reading from the top.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Menu - Sunny Bakery</title>
</head>
<body>
<header>
<p>Sunny Bakery</p>
<nav aria-label="Main"><a href="index.html">Home</a> <a href="menu.html">Menu</a></nav>
</header>
<main>
<h1>Our menu</h1>
<p>Sourdough, rye and fresh pancakes every morning.</p>
</main>
<footer>
<p><small>© 2026 Sunny Bakery</small></p>
</footer>
</body>
</html>Page-specific styling with a body class
One shared stylesheet can style many pages. A class on the body, here page-contact, lets you change the look of just this page: a warm background and a gold heading, while every other page keeps the default style.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contact - Sunny Bakery</title>
<style>
body{margin:0;padding:16px;font-family:Georgia,serif;line-height:1.5}
.page-contact{background:#fdf6e3}
.page-contact h1{color:#b58900}
</style>
</head>
<body class="page-contact">
<h1>Contact us</h1>
<p>Only pages with the page-contact class get this warm background.</p>
</body>
</html>Tip: Do the styling in CSS. bgcolor and the other old body attributes are dead.
Browser support
Every browser has supported body since the first versions of HTML. Its old presentational attributes, such as bgcolor, text and background, still render for backward compatibility. They are obsolete in the HTML Living Standard and fail validation, though. Use CSS in new code.
Accessibility
Divide the body into landmarks (header, nav, main, footer). Screen reader users can then jump straight to the part they want. The W3C landmark regions guide (opens in a new tab) describes how each one is announced.
Common mistakes
Wrong
<body bgcolor="yellow">Right
<body>
<!-- in CSS: body{background:yellow} -->bgcolor is obsolete. Colors belong in CSS.
Frequently asked questions
Can an HTML page have more than one body tag?
No. A document has one <body>, directly after <head>. The parser ignores a second <body> tag and merges any attributes on it into the existing body. To divide the page, use <header>, <main>, <section> and <footer> inside that one body.
Should I use body attributes like bgcolor?
No. bgcolor, text, link and background on <body> are obsolete in the HTML Living Standard. Browsers still honour them so that old pages keep working. New code sets colors and backgrounds in CSS, for example body{background:#fff;color:#222}, and leaves the markup to describe structure. Prefer to lay out the body visually and copy clean markup? A WYSIWYG HTML editor such as HTML6 (opens in a new tab) shows the code beside the formatted page.
Practise it
- The Page Skeleton (Module 1: First Page)
- Head and Body (Module 1: First Page)
- Project: Hello World Page (Module 1: First Page)
- Project: Blog Page (Module 4: Structure and Semantics)
- Project: Class Timetable (Module 5: Tables)
- Project: Sign-up Form (Module 6: Forms)