Phase 00Your first shipped site17 of 434

Anatomy of a page

Seven parts, in the same order, on every web page there has ever been. Learn the map and your generated file stops being a wall of text.

Concept18 minAI pair

Your page is one file and it looks like a wall. It is not. It has seven parts, in a fixed order, and every page on the internet has the same seven.

Anatomy of an HTML page

Exploded page view

A web page is made of a few clear sections.

The head and script help in the background. The rest shape what people see.

browser page

Now looking at

Hero

The first big message

Often the first thing people read.

Seven parts

Simple rule: the head and the ending script help the page work. The header, hero, main content, aside and footer shape what people see.

Hover any section to focus it. The page is the full structure, not just the visible content in the middle.

Structure of an HTML page

The seven parts are the head, which is invisible and affects how the visible page loads; the header and navigation; the hero, usually the first thing someone reads; the main content; an aside, if there is one; the footer; and the script at the end.

Hover or tab through the map below. Either side lights the other, because the file and the page are the same object seen twice.

The page, and the file that made it

What a visitor sees

<head> invisible, and it decides the speed

Ines VargaWork · About

Hand-bound books, made in Lisbon

Twenty years of repairs, rebinds and one-offs.

Commission a binding

Recent work

Lead times are about six weeks.

ines@example.com · Lisbon

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ines Varga: bookbinder</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <a class="mark" href="/">Ines Varga</a>
      <nav><a href="#work">Work</a><a href="#about">About</a></nav>
    </header>
 
    <section class="hero">
      <h1>Hand-bound books, made in Lisbon</h1>
      <p>Twenty years of repairs, rebinds and one-offs.</p>
      <a class="cta" href="#contact">Commission a binding</a>
    </section>
 
    <main id="work">
      <h2>Recent work</h2>
      <article>…</article>
      <article>…</article>
      <aside>
        <p>Lead times are about six weeks.</p>
      </aside>
    </main>
 
    <footer>
      <p>ines@example.com · Lisbon</p>
    </footer>
 
    <script src="main.js" defer></script>
  </body>
</html>

Hover or tab through either side. Every page you generate has these seven parts in this order, whatever it looks like on the surface, which is why this map transfers to the one you shipped.

Hover either panel. The rendered page and the file are the same thing, seen twice.

Then do it on your own file. Open it, find the seven regions, and add a comment above each one naming it. Ten minutes, and the file stops being a stranger.

One thing to notice while you are in there: how much of your file is <div>. Count them. You will come back to that number in two chapters.

You should now be able to

Name the seven regions of a page and what each is for
Find any region of your own page in its source file

Ask the community

Loading…

← PreviousBrief it, build it, ship itYour first shipped site Next →Every tag accounted forYour first shipped site