HTML: the `body` element

The <body> element contains the page content that users can see or interact with, such as headings, text, images, and controls.

What you will learn

Where to put visible content and interactive controls in <body>
How <body> differs from <head>
How to organize page content with CSS, JavaScript, and accessible structure

Basic document structure

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My page</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This text is part of the visible page.</p>
</body>
</html>

The head stores metadata and resource links. The body stores the document's visible and interactive content. Keep one body element in the document.

Organize the content

<body>
  <header>Site navigation</header>
  <main>
    <h1>Learning HTML</h1>
    <p>The main lesson goes here.</p>
  </main>
  <footer>Contact information</footer>
</body>

Use meaningful structural elements inside the body. This helps people scan the page and helps assistive technology understand landmarks.

CSS and JavaScript

Use CSS to control presentation and JavaScript to add behavior. JavaScript can access the element with document.body, but it should not replace meaningful HTML structure.

Common mistakes

Putting visible page content in <head>.
Creating two <body> elements.
Using only generic <div> elements when a landmark or heading has a clearer meaning.
Using JavaScript to create content that should be available in the initial HTML.