Station 03 · Semantic landmarks

The signposts

A page is a few rooms. There is the strip across the top with the name of the house and the row of links — the header. There is the main reading you came for — the main. There is the small print and the copyright at the bottom — the footer. HTML has a tag for each of these rooms, and using the right one is one of the kindest things you can do for the readers you will never meet: screen reader users, search engines, future you.

Below is a stripped down sketch of any page on this site. Hover any tag, hover any room. They are the same five signposts on the Pokemon cabinet, the Theater, the Patrons' Ledger — every page.

page.html — the page as named rooms

1<body>
2  <header>
3    <a>ROLLOUT</a>
4    <nav>
5      <a>Games</a>
6      <a>Theater</a>
7      <a>Engine Room</a>
8    </nav>
9  </header>
10  <main>
11    <article>
12      <h1>The signposts</h1>
13      <p>The lesson body…</p>
14    </article>
15    <aside>
16      <p>What you just learned</p>
17    </aside>
18  </main>
19  <footer>
20    <p>Built by the squad</p>
21  </footer>
22</body>

<body>

ROLLOUT

<nav>Games · Theater · Engine Room

<main>

The signposts

The lesson body lives here — one self contained reading.

<aside>

What you just learned

Hover any tag or any region — every page on this site is laid out by these same five rooms.

What you just learned

Every page on the web is a few labelled rooms: a header up top, the main content in the middle, a footer at the bottom.
<header>, <nav>, <main>, <article>, <aside>, <footer> are not paint — they are signposts. They tell a browser, a screen reader, and a search engine which box is which.
Could you use plain <div>s? Yes. Should you? No. The signposts are free, and they make your page legible to readers who cannot see.
Every page on this site uses exactly this skeleton — open the inspector on any of them, you will recognise it.

Next — Station 04: The forms

Right this way…