The Body (<body>)

<body> is the second and final child of <html>, and it holds everything the user actually sees and interacts with: text, images, links, forms, buttons, and any content added dynamically by JavaScript.

What belongs in the body

Text content — headings, paragraphs, lists, quotes.
Media — images, audio, video, canvas drawings, embedded SVG.
Interactive elements — links, buttons, forms and their inputs.
Structural/semantic containers — <code><header></code>, <code><nav></code>, <code><main></code>, <code><section></code>, <code><article></code>, <code><aside></code>, <code><footer></code>.
Scripts, often placed at the very end of the body so they run after the content above them exists.

HTML

<body>
  <header>...</header>
  <main>
    <h1>Welcome</h1>
    <p>This is the visible content of the page.</p>
  </main>
  <footer>...</footer>

  <script src="/app.js"></script>
</body>

The one-body-per-document rule

A valid HTML document has exactly one <body> element, and it must be the second child of <html>, right after <head>. Multiple <body> elements are invalid — browsers will typically only honor the first one and merge or drop the content of any additional ones, producing unpredictable results.

Don't try to fake multiple bodies

Some beginners reach for a second <body> tag to create separate "pages" within one file. Use container elements like<div> or <section> inside a single body instead — that's what they're for.

Event handlers: historically vs today

In older HTML, the <body> tag itself commonly carried inline event-handler attributes for whole-page events:

HTML

<!-- Old-school approach, still valid but discouraged -->
<body onload="init()" onresize="handleResize()">
  ...
</body>

Attribute	Fires when
`onload`	The page (and its resources) has finished loading
`onunload`	The user is navigating away from the page
`onresize`	The browser window is resized
`onscroll`	The page is scrolled

These attributes still work in modern browsers, but modern practice avoids them in favor of attaching listeners from JavaScript, which keeps behavior out of your markup and easier to maintain:

HTML

<body>
  ...
  <script>
    window.addEventListener('load', init)
    window.addEventListener('resize', handleResize)
  </script>
</body>

Separation of concerns, again

This mirrors the same principle from the very first page of this series: structure (HTML) shouldn't be tangled up with behavior (JavaScript). Inline event-handler attributes blur that line, which is why they've fallen out of favor even though they remain valid HTML.

Where to put your scripts

Placing <script> tags at the end of <body> — or using the defer attribute in <head> — ensures your JavaScript runs only after the DOM elements it needs already exist. This is covered in depth in the Performance section later in this series.

With the doctype, <html>, <head>, and <body> all covered, you know the complete shape of a valid document. Next, we move from document-level structure down to syntax rules — the grammar you use to write every individual element correctly.