Anatomy of a Document

You've now met the doctype, and briefly seen <html>, <head>, and <body> in the first-page walkthrough. This page zooms out and shows exactly how all the pieces of a valid HTML document fit together, before the next few pages examine each one individually.

The absolute minimum skeleton

Technically, browsers are forgiving enough that a page with almost nothing still renders something. This is the smallest structure that's considered a genuinely valid HTML5 document:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Untitled</title>
  </head>
  <body></body>
</html>

Browsers fill in gaps for you

If you omit <head> or <body> entirely, browsers will often insert them invisibly while building the DOM. This forgiveness is convenient, but it's not something to rely on — always write both explicitly.

A realistic, complete skeleton

In practice, a real page's <head> and{' '} <body> contain much more. Here is a representative example of what a production page's anatomy typically looks like:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Acme Store — Handmade Pottery</title>
    <meta name="description" content="Shop handmade pottery, shipped worldwide." />
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <header>
      <h1>Acme Store</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/shop">Shop</a>
        <a href="/contact">Contact</a>
      </nav>
    </header>

    <main>
      <h2>Featured Pottery</h2>
      <p>Hand-thrown mugs, bowls, and vases — made in small batches.</p>
    </main>

    <footer>
      <p>&copy; 2026 Acme Store</p>
    </footer>

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

How the parts relate

Part	Role	Appears
Doctype	Triggers standards mode rendering	Once, as the very first line
<code><html></code>	The single root element wrapping everything else	Once, containing head and body
<code><head></code>	Metadata about the document — not shown directly on the page	Once, first child of html
<code><body></code>	Everything visible: text, images, forms, scripts	Once, second child of html

Notice the strict hierarchy: <html> is the parent of exactly two children, <head> and <body>, always in that order. Everything else in your page nests inside one of those two.

Building the anatomy piece by piece

The next page dives into the <code><html></code> element itself, including why the <code>lang</code> attribute matters so much.
Then <code><head></code> — exactly what belongs there and what doesn't.
Then <code><body></code> — the one-body-per-document rule and how event handling has evolved.

A useful habit

When starting any new page, type the full skeleton (or expand it with Emmet's ! abbreviation) before writing any real content. It keeps you from forgetting a required piece.

With the full-document picture in view, the next three pages examine <html>, <head>, and <body> individually, in detail.