Markup CityISSUE #29 of 39

layout · the structural skeleton

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysPage layout is built by combining semantic regions — header, nav, main, aside, footer — into a structure.

A typical page has a banner up top (<header>), navigation (<nav>), the primary content (<main>, one per page), optional side content (<aside>), and a (<footer>). These are just block containers with meaning.

HTML defines the regions; CSS (flexbox/grid) arranges them. Start by writing the structure semantically, then lay it out — never the other way around.

Power-ups you unlock

header · nav · main · aside · footer = page regions
Exactly one <main> per page
HTML defines regions; CSS arranges them
Structure first, layout second

The Unclosed Tag attacks — common mistakes

Multiple <main> elements on one page
Building layout with tables or stacks of <div>s
Styling before the semantic structure exists

Boss battleLay out a page with header, nav, main, and footer regions, then use a CSS flex/grid rule to put the nav beside the main.

Example code

<!doctype html>
<html><head><meta charset="utf-8">
<style>body{margin:0;font-family:sans-serif;background:#06040d;color:#e6e0ff}
header,nav,main,footer{padding:14px;border:1px solid #2a1d4a;margin:4px}</style>
</head>
<body>
  <header><h1 style="margin:0;color:#b388ff">Site</h1></header>
  <nav>home · about · contact</nav>
  <main>the primary content lives here.</main>
  <footer>© 2026</footer>
</body></html>

▶ Open the interactive comic issue

‹ The Head · Meta · Title · Links Responsive · Sizing For Any Screen ›