HTML Body Tag: The Visible Content of a Web Page
The HTML <body> element contains the document content that is presented to users, such as headings, paragraphs, links, images, forms, tables and page sections.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This content appears in the page.</p>
</body>
</html><head> and before the closing </html> tag.Where the Body Element Goes Top ↑
The body begins after the closing </head> tag and ends before </html>.
<html>
<head>
<!-- Metadata and document-level resources -->
</head>
<body>
<!-- Page content presented to users -->
</body>
</html>Browsers can sometimes infer omitted structural tags while parsing HTML, but writing the <body> element explicitly makes the document structure clearer and easier to maintain.
What Goes Inside body? Top ↑
The body can contain the content and structural elements used to build the page, including:
- headings and paragraphs,
- links,
- images,
- tables,
- forms,
- lists, figures and media,
- semantic layout elements such as
<header>,<nav>,<main>,<section>and<footer>.
<body>
<h1>Python Tutorials</h1>
<p>Learn Python with examples.</p>
<a href="python-basics.html">Start learning</a>
</body>head vs body Top ↑
<head> | <body> |
|---|---|
| Contains document metadata and resources. | Contains the document content presented to users. |
Common elements include title, meta, link and some scripts/styles. | Common elements include headings, paragraphs, images, links, forms and page sections. |
| Its metadata is not normally rendered as the main page content. | Its content forms the main rendered document. |
See the HTML head element for document metadata and resources.
Styling the Body with CSS Top ↑
Modern HTML uses CSS for page colors, backgrounds, fonts, margins and other presentation. Avoid old presentational body attributes such as bgcolor, text, link and background.
External stylesheet Top ↑
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome</h1>
</body>In style.css:
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #ffffff;
color: #222222;
}See CSS styles for the body element, CSS basics and page background color.
class and id on body Top ↑
The body element accepts normal global HTML attributes such as class and id. These are useful when different page types need different styling or JavaScript behavior.
<body class="tutorial-page">
<main>
<h1>SQL Tutorial</h1>
</main>
</body>A stylesheet can then target that page type:
body.tutorial-page {
line-height: 1.6;
}Semantic Page Structure Inside body Top ↑
Instead of filling the body with generic containers only, use semantic elements where they describe the purpose of the content.
<body>
<header>
<h1>plus2net Tutorials</h1>
</header>
<nav aria-label="Main navigation">
<a href="html.html">HTML</a>
<a href="python.html">Python</a>
</nav>
<main>
<h2>Latest tutorial</h2>
<p>Page content goes here.</p>
</main>
<footer>
<p>Copyright plus2net</p>
</footer>
</body>This gives the page a clearer document structure for users, browsers and assistive technologies.
Page-load Events Top ↑
The body element supports page-related event handler attributes such as onload, and the original Plus2net tutorial demonstrates printing a page when it loads.
<body onload="window.print()">
<p>Printable content</p>
</body>For larger applications, keeping JavaScript separate from HTML is usually easier to maintain:
<script>
window.addEventListener('load', () => {
console.log('Page loaded');
});
</script>Complete Modern HTML Example Top ↑
The old version of this tutorial used an HTML 3.2 doctype and a META KEYWORDS tag. A current HTML document can use the much simpler HTML5 doctype and does not need a keywords meta tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A short description of this page.">
<title>My HTML Page</title>
</head>
<body>
<main>
<h1>My Name</h1>
<p>My address goes here.</p>
<p><em>Phone: 0000000000</em></p>
</main>
</body>
</html>Common Body Tag Mistakes Top ↑
Using an old HTML 3.2 doctype Top ↑
Use the modern <!doctype html> declaration for HTML documents.
Using presentational body attributes Top ↑
Old attributes such as bgcolor, text, link and background should be replaced with CSS.
Putting visible page content in head Top ↑
Document metadata belongs in <head>. Main rendered document content belongs in <body>.
Adding more than one body element Top ↑
An HTML document should have one body element.
Using META KEYWORDS Top ↑
The old example included a keywords meta tag. It is not needed in a modern HTML page.
Putting all page styling inline on body Top ↑
Inline styles work, but reusable CSS in a stylesheet is easier to maintain across multiple pages.
Exercise Top ↑
my_page.htm. Inside the body:
- display your name as the main heading,
- display your address in the next paragraph,
- display your phone number with emphasis,
- add a background color using CSS rather than an old body attribute.
Related Tutorials Top ↑
Frequently Asked Questions Top ↑
It contains the main document content presented to users, such as text, links, images, forms, tables and page sections.
It comes after the head element and before the closing html tag.
One body element should be used for the document.
No. Use CSS background-color or other CSS background properties instead of obsolete presentational body attributes.
Yes. The body element accepts global HTML attributes such as class and id.
The head contains metadata and document resources, while the body contains the document content presented to users.
No. A keywords meta tag is not required for a modern HTML document.
Meta Tags Body Background Color HTML Page Structure HTML
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
