HTML · Module 02 · Lesson 9 of 54

The Body Element

The Document Body

The <body> wrapper contains all the layout page structures rendered to the user viewport:

Imagine the body as the stage in a theater. The backstage crew setting up the lights and schedules (the <head>) are hidden, but everything the audience actually sees—the actors, the props, the backdrop—stands on the stage.

The <body> element is the container for all the visible content on your webpage. Everything you see on a website—paragraphs, headings, images, forms, videos, and navigation menus—must go between the opening <body> and closing </body> tags.

Why does it matter?

The <body> tag marks the boundary of the visible document. Browsers rely on the body element to know what to draw on the screen. It is also the main container that developers target when they want to change the background color or main font of an entire website.

How to write it

There should only be one <body> block per HTML document, placed directly after the <head> block:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to my website!</h1>
  <p>Here is some visible text.</p>
</body>
</html>

Visible Webpage Content

Common Mistakes

Nesting the body inside the head: The head and body are sibling elements. You should never put the <body> inside the <head>.

Creating multiple bodies: An HTML page must contain only one <body> element.

Quick Reference

<body> — Contains all visible elements on the webpage.

Your Task

Create a `<body>` element. Inside it, write a `<p>` containing 'Hello Body'. Make sure the body is closed before `</html>`.

index.html

Type code above to start the lesson.

Live Preview