Every HTML document is divided into two main parts: the head and the body. While the head contains metadata, the <body> tag is the container for everything you actually see on the screen.

Step 2: Video

The <body> element goes inside the <html> element, right after the closing </head> tag. There can be only one <body> element in a document.

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>

Step 3: Video

Just like other tags, we must close it. The closing </body> tag usually goes at the very end of your HTML file, just before the closing </html> tag.

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>

  </body>
</html>

Step 4: Exercise

Checkpoint: Which tag contains the visible content of the page?

<html>
  <head>...</head>
  <body>...</body>
</html>

Step 5: Video

Now, let's add content. Any headings, paragraphs, images, or links must go BETWEEN the opening and closing body tags to be rendered by the browser.

<html>
  <head>...</head>
  <body>
    <h1>Hello World</h1>
    <p>This is my page.</p>
  </body>
</html>

Step 6: Video

Here is the browser view. The <head> info is hidden (except the title tab), but everything we put in the <body> is displayed in the viewport.

<html>
  <head>...</head>
  <body>
    <h1>Hello World</h1>
    <p>This is my page.</p>
  </body>
</html>

Step 7: Video

Remember: Never place content after the closing </body> tag. It creates invalid HTML and can cause rendering issues in different browsers.

<html>
  <body>...</body>
  
</html>

Step 8: Video

You have learned the container of the web! The Body tag is where all your creativity will live. Register now to practice structuring complete documents.

body_test.html

1 / 8

🦵

Tutor:Every HTML document is divided into two main parts: the head and the body. While the head contains metadata, the <body> tag is the container for everything you actually see on the screen.

⭐ 0 EXP

Structure Mastery

Unlock nodes by learning HTML anatomy.

Concept 1: HTML Structure

An HTML document is like a human body. It has a head (metadata) and a body (visible content).

System Check

Which element wraps both the head and the body?

Community Holo-Net

Showcase Your Skeleton

Built a complex page layout? Share how you structured your body tag.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

The HTML Body Element

Pascual Vila

Frontend Instructor.

What is the HTML Body Tag?

The <body> element serves as the primary container for all visible content on a webpage. When building a web page, everything displayed to the user—including text, images, videos, and interactive elements—must be enclosed strictly within the <body> tags.

Visibility Focus: It houses all renderable document nodes that users interact with.
Structural Necessity: It forms the core structure of the browser viewport.

Why is the Document Structure Important?

An HTML document has a strict hierarchical structure. The <html> tag acts as the document root. Inside the root, we define two specific children: <head> (for metadata, styles, and scripts) and <body> (for the rendered content). These two are siblings; meaning you cannot nest one inside the other.

Singularity in HTML Pages

A fundamental rule for search engines and web browsers is that there can be exactly one <body> element in a single HTML document. Inserting multiple body tags creates invalid markup and results in unpredictable rendering across browsers.

Body Glossary

<body>: The HTML element that directly represents the content of an HTML document. A valid document supports only one body tag.
Viewport: The user's visible framing area of a web page on any given device.
<head>: The sibling element to the body, strictly acting as the container for invisible metadata and logic scripts.

📖 INDEX