<body>

The <body> element represents the main content of an HTML document. All visible content — text, images, links, and more — goes inside the <body> element.

Syntax

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <!-- Write the content displayed on the page here -->
  <h1>Heading</h1>
  <p>Paragraph text.</p>
</body>
</html>

Common tags used inside <body>

Tag	Description
<header>	Represents the header of a page or section. Typically contains a logo and navigation.
<nav>	Represents a group of navigation links.
<main>	Represents the main content of the page. Use only once per page.
<article>	Represents self-contained content such as a blog post or news article.
<section>	Represents a thematic grouping of content within a document.
<aside>	Represents supplementary content related to the main content, such as a sidebar.
<footer>	Represents the footer of a page or section. Typically contains copyright information.
<div>	A generic block-level container with no semantic meaning. Commonly used for layout purposes.

Sample code

<body>
  <!-- Header -->
  <header>
    <h1>Site Name</h1>
    <nav>
      <a href="/?lang=en">Home</a>
      <a href="/about/?lang=en">About</a>
    </nav>
  </header>

  <!-- Main content -->
  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article body text.</p>
    </article>
  </main>

  <!-- Footer -->
  <footer>
    <p>© 2025 Site Name</p>
  </footer>
</body>

Result

The browser renders the site name heading, navigation links, article title, body text, and footer copyright notice in order.

Notes

It is recommended to structure the content inside <body> using semantic HTML5 elements such as <header>, <nav>, <main>, and <footer>. This helps screen readers and search engines understand the structure of your page correctly.

When you need a container purely for layout with no semantic meaning, use the <div> element. For content that carries meaning, choose the appropriate semantic element whenever possible.

It is common practice to load JavaScript files at the end of <body>, just before the closing </body> tag. This prevents JavaScript from blocking HTML rendering and helps pages load faster.