Where does the body tag go in an HTML document?

The body tag goes inside html, after the closing head tag. Every HTML page has exactly one body element.

Does the body tag have specific attributes?

No tag-specific attributes exist in HTML5. Use global attributes like class and id, and style the page with CSS instead of deprecated attributes like bgcolor.

Can a page have more than one body tag?

No. Each HTML document must have exactly one body element. Use div, main, section, or other elements to divide content inside body.

HTML <body> Tag

Q: What is the HTML body tag used for?

The body element holds all visible content on a web page — text, images, links, videos, forms, and scripts that visitors see and interact with.

Q: What is the difference between head and body?

head holds metadata like title, charset, and stylesheets. body holds the visible page content users see in the browser.

Beginner

⏱️ 6 min read

📚 Updated: Jun 2026

🎯 4 Examples

Document Structure

Overview

What You’ll Learn

By the end of this tutorial, you’ll understand how the body element holds every visible part of a web page.

Document Structure

See where <body> fits inside html and after head.

Visible Content

Learn what belongs in body—text, images, links, forms, and media.

head vs body

Separate metadata in head from content users see in body.

Semantic Layout

Organize body content with header, main, and footer.

CSS Styling

Style page background and typography with CSS instead of deprecated attributes.

Production Tips

Apply accessibility and one-body-per-page best practices.

Fundamentals

What Is the `<body>` Tag?

The body element (<body>) represents the main content of an HTML document—everything the user sees and interacts with in the browser window. Metadata like the page title and charset live in <head>, not in <body>.

💡

Exactly one body per page

Every HTML document has a single <body> element inside <html>. Use div, main, or section to divide content—never add a second body tag.

The body is a block-level root container for visible content: headings, paragraphs, images, links, videos, forms, and scripts that visitors see on screen.

Foundation

📝 Syntax

Every HTML page follows this basic skeleton. Place all visible content between the opening and closing <body> tags:

syntax.html

<!-- Basic HTML document skeleton -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Page Title</title>
</head>
<body>
  <!-- Your visible page content goes here -->
</body>
</html>

Syntax Rules

Place body inside html, immediately after the closing </head> tag.
Use exactly one body element per HTML document.
Put all visible content inside body—never nest html or head inside it.
Keep metadata like title and charset in head, not in body.

Cheat Sheet

⚡ Quick Reference

Use Case	Code Snippet	Result
Basic skeleton	`<body>...</body>`	Visible page content
Text content	`<body><h1>...</h1><p>...</p></body>`	Welcome Sample paragraph.
Links	`<body><a href="...">...</a></body>`	Visit CodeToFun
Semantic layout	`<body><header><main><footer>`	Landmark structure
Page styling	`body { background: #f8fafc; }`	CSS, not bgcolor
Scripts	`<script>...</script>` before `</body>`	Non-blocking load

Comparison

⚖️ <head> vs <body>

Every HTML page splits metadata and visible content between these two sections:

Feature	<head>	<body>
Purpose	Metadata (not shown on screen)	Visible page content
Contains	title, charset, CSS links, SEO meta	Text, images, links, forms, media
Page title	Yes — `<title>` belongs here	No — title is not body content
Scripts	Allowed but uncommon	Often placed before `</body>`

Reference

🧰 Attributes

The <body> tag has no tag-specific attributes in HTML5. Use global attributes and CSS for styling:

class / id Global

Hook for CSS and JavaScript. Common pattern: class="page-body" or id="app".

<body class="page-body">

style Optional

Inline styling for quick overrides. Prefer CSS stylesheets in production for maintainability.

style="margin: 0;"

Allowed content Flow

Any visible HTML element: headings, paragraphs, images, links, forms, semantic landmarks, and scripts.

header, main, footer, div, p, a...

Deprecated attrs Avoid

Do not use bgcolor, background, or text. Style the page with CSS instead.

body { background: #f8fafc; }

The body element uses global attributes only. There are no tag-specific attributes in the HTML5 specification.

Hands-On

Examples Gallery

Real-world body content patterns with copy-ready code, live previews, and hands-on practice.

Live Preview

Content that would appear inside a page body:

Welcome to CodeToFun

This text, heading, and link are typical body content.

Visit CodeToFun

Text Content in body

Headings and paragraphs are the most common content inside <body>.

text-content.html

<body>
  <h1>Welcome to My Website</h1>
  <p>This is a sample paragraph inside the body.</p>
</body>

Try It Yourself

📚 Common Content Inside body

The body can contain any visible HTML element: text, images, links, lists, tables, forms, videos, and semantic layout sections.

Images in body

Place images inside <body> so they appear on the page. Always include meaningful alt text.

image-content.html

<body>
  <img src="/images/javascript.png" alt="JavaScript logo" width="128" height="128">
</body>

Try It Yourself

Links in body

Hyperlinks go inside <body> so users can click and navigate.

link-content.html

<body>
  <p>Visit our tutorials:</p>
  <a href="https://codetofun.com">Visit CodeToFun</a>
</body>

Try It Yourself

Full Page Structure

A complete beginner-friendly page with header, main, and footer inside <body>.

full-page.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Web Page</title>
</head>
<body>
  <header><h1>My Website</h1></header>
  <main><p>All visible content goes here.</p></main>
  <footer><p>&copy; 2026 CodeToFun</p></footer>
</body>
</html>

Try It Yourself

Design

Styling <body> with CSS

Set page-wide defaults for background, typography, and spacing:

default Browser margins

margin: 0 Reset body margin

background Page background

font-family Base typography

body-styling.css

/* Page-wide defaults */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #f8fafc;
  color: #334155;
  line-height: 1.6;
}

/* Avoid deprecated bgcolor attribute */
/* Use CSS background instead */

Typical body content styling

Welcome to CodeToFun

Styled with CSS applied to the body element.

A11y

♿ Accessibility

Structure inside <body> affects accessibility:

Use semantic landmarks — header, main, nav, and footer help screen reader users navigate.
One main per page — wrap primary content in a single main element.
Skip links — add a skip-to-content link at the top of body for keyboard users.
lang on html — set language on html, not body, for correct pronunciation.

🧠 How the <body> Fits Together

Browser loads the document

DOCTYPE and html tell the browser this is an HTML page.

Parse

head provides metadata

Title, charset, and linked CSS load from head without appearing on screen.

Metadata

body renders visible content

Everything inside body is painted in the browser window for the user.

Display

A complete web page

head + body = metadata plus everything visitors see and interact with.

Compatibility

Universal Browser Support

The <body> element is supported in all browsers and has been part of HTML since the earliest versions.

✓ Baseline · Since HTML 2

Works everywhere your users are

From legacy Internet Explorer to the latest Chromium builds — the body element is the universal container for every web page ever built.

100% Core tag support

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<body> tag 100% supported

Bottom line: Ship page content with confidence. The <body> element is safe to use in every production environment today.

Wrap Up

Conclusion

The <body> tag is the foundation of every web page—all visible content lives inside it. Pair it with a proper <head> section and semantic elements like main and header for clean, accessible HTML.

View Examples Gallery Try Full Page

Pro Tips

💡 Best Practices

✅ Do

Use exactly one body per HTML page
Wrap primary content in main
Style the page with CSS instead of deprecated attributes
Place scripts before the closing </body>

❌ Don’t

Put title or charset meta inside body
Use multiple body tags on one page
Use bgcolor or background (deprecated)
Nest html or head inside body

Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about `<body>`

Bookmark these before you ship — they’re the foundation of every web page.

Core concepts

🌐 01

Visible Content

<body> holds all content users see—text, images, links, and forms.

Foundation

🔢 02

One Per Page

Exactly one body element per HTML document—no exceptions.

Rule

📝 03

After head

Goes inside html, immediately following the closing </head> tag.

Structure

⚖️ 04

head vs body

head = metadata; body = visible page content.

Comparison

🛠 05

Semantic Layout

Use header, main, and footer inside body for accessibility.

Pattern

🎨 06

Style with CSS

Use CSS for background and typography—not deprecated bgcolor.

Design

❓ Frequently Asked Questions

What is the HTML body tag used for?

It contains all visible content on a web page—text, images, links, forms, and everything users see in the browser.

Where does the body tag go?

Inside html, after the closing </head> tag. Every page has exactly one body.

What is the difference between head and body?

head holds metadata (title, charset, CSS links). body holds the visible page content.

Can I have two body tags?

No. Use one body per page. Divide content with div, main, section, or other elements inside it.

How do I style the body background?

Use CSS: body { background: #f8fafc; }. Do not use the deprecated bgcolor attribute.

Build Your First Page

Practice the html, head, and body structure in the Try It editor.

Try full page →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML blockquote Tag HTML br Tag

HTML <body> Tag

What You’ll Learn

Document Structure

Visible Content

head vs body

Semantic Layout

CSS Styling

Production Tips

What Is the <body> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

Welcome

⚖️ <head> vs <body>

🧰 Attributes

Examples Gallery

Live Preview

Welcome to CodeToFun

Text Content in body

Welcome to My Website

📚 Common Content Inside body

Images in body

Links in body

Full Page Structure

Styling <body> with CSS

Welcome to CodeToFun

♿ Accessibility

🧠 How the <body> Fits Together

Browser loads the document

head provides metadata

body renders visible content

A complete web page

Universal Browser Support

Works everywhere your users are

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <body>

Visible Content

One Per Page

After head

head vs body

Semantic Layout

Style with CSS

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML <article> Tag

HTML <a> Tag

CSS Styling

Try Full Page

Build Your First Page

About the author

What Is the `<body>` Tag?

Six truths every developer should know about `<body>`