body
The visible document container.
Platform under construction
HTML Body Element
Learn body as part of the HTML element system: when to use it, how it fits inside a document and what mistakes to avoid.
Page body
The body contains everything the user can see and use.
The body element is where the interface lives: text, navigation, forms, images, buttons, sections, tables and scripts that run after the page loads.
Think of body as the stage. It should contain meaningful regions and content, not a random pile of div elements.
Element group:
body. The visible interface and content of the document. Syntax in context
A body should be organized around real page regions.
Use landmarks and sections inside body so the page is understandable before CSS is even applied.
<body>
<header>
<a href="/">Full Stack Masterclass</a>
</header>
<main>
<h1>Learn HTML</h1>
<p>Start with structure before styling.</p>
</main>
<footer>Copyright 2026</footer>
</body>
Good versus weak
The difference is usually meaning, not only syntax.
Good
<body>
<header>
<a href="/">Full Stack Masterclass</a>
</header>
<main>
<h1>Learn HTML</h1>
<p>Start with structure before styling.</p>
</main>
<footer>Copyright 2026</footer>
</body>
Weak
<body>
<div>
<div>Full Stack Masterclass</div>
<div>Learn HTML</div>
<div>Copyright 2026</div>
</div>
</body>
Rules that matter
Use these rules before publishing real HTML.
One visible document
The body represents the visible page, not metadata.
Use main once
Most pages should have one main element for the primary content.
Structure before styling
If the page makes sense without CSS, the body structure is probably healthy.
Load scripts carefully
Use defer or place scripts where they do not block rendering unnecessarily.
Production thinking
HTML is also for accessibility, SEO, security and maintenance.
Why does this matter?
Beginners often ask why this is not just a div with styling. The reason is that HTML is read by browsers, search engines, screen readers and future developers. Clear meaning makes the page easier to use and maintain.
Accessibility
Screen reader users navigate by landmarks and headings inside body. Meaningful regions reduce friction immediately.
Production note
A clean body structure makes templates easier to maintain and layout bugs easier to isolate.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change one tag, attribute or text value in the example.
- Run the preview and describe exactly what changed.
- Reset the lab and repeat the same change without looking at the original.
Practice assignment
Do this before moving to the next lesson.
- Change one meaningful part of the HTML, not only the visible text.
- Run the preview and check whether the result still makes semantic sense.
- Explain why the element or attribute you changed belongs in this exact place.
Try it yourself
Structure the visible page
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?