Semantic HTML5 layout: header, nav, main, section, article, aside, and footer
Every element covered so far describes content within a page. This part covers the elements that describe the regions of a page itself — the real structural vocabulary that replaces a page built entirely from generic, meaningless <div> elements.
The full real layout
<body>
<header>
<img src="/images/logo.svg" alt="Bright Leaf Coffee" />
<nav>
<a href="/">Home</a>
<a href="/subscriptions">Subscriptions</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<section>
<h1>Small-batch coffee, roasted weekly</h1>
<p>Shipped fresh, never from a warehouse.</p>
</section>
<section>
<h2>Our Subscriptions</h2>
<article>
<h3>Gift Subscription</h3>
<p>One bag a month, with a handwritten note on the first shipment.</p>
</article>
<article>
<h3>Monthly Subscription</h3>
<p>Your choice of roast, delivered on your own schedule.</p>
</article>
</section>
<aside>
<h2>Roaster's Note</h2>
<p>This week's Ethiopian batch has notable blueberry and floral tones.</p>
</aside>
</main>
<footer>
<p>© 2026 Bright Leaf Coffee</p>
</footer>
</body>What each element actually means
<header>— introductory content for the page or a section, typically a logo and top navigation; not necessarily at the very visual top, and not the same as an<h1><nav>— a block of genuinely major navigation links; a handful of links in a footer generally shouldn't be wrapped in<nav>since it's meant for primary navigation, not every group of links on a page<main>— the one real, primary content of the page, excluding repeated elements like the header and footer; exactly one per page<section>— a thematic grouping of content, generally with its own heading — the "Our Subscriptions" block above is a real section because it groups genuinely related content under one heading<article>— content that could stand alone and make sense independently, even removed from the page — each subscription card above works as an<article>because it's independently meaningful, unlike an arbitrary<div>chunk<aside>— content tangentially related to the main content, not part of its core flow — the Roaster's Note is real, useful content, but removing it wouldn't break the page's primary meaning<footer>— closing content for the page or a section, typically copyright, secondary links, or contact info
Why this matters beyond just organization
A page built entirely from <div> elements: a screen reader user has
no way to jump directly to "the main content" or "the navigation" —
every div sounds identical
The same page with real semantic elements: a screen reader can offer
direct landmark navigation ("jump to main content," "jump to
navigation") because the elements themselves declare their roleThis is the single biggest practical reason semantic HTML5 elements exist — they give assistive technology real, structural landmarks to navigate by, the same way this series' own ChapterSidebar navigation gives a sighted reader a way to jump directly to a section instead of scrolling through everything. Search engines get a real, similar benefit — understanding which part of a page is the actual primary content versus supplementary or navigational content, rather than treating every <div> as equally significant.
Using <section> as a generic styling wrapper anywhere a <div> would previously have gone, rather than specifically for a real thematic grouping with its own heading. A <section> with no heading and no clear, independent theme isn't meaningfully more semantic than a <div> — it's still correct to use plain <div> for a wrapper that exists purely for styling or layout purposes, with no real semantic meaning of its own.
<div> and <span> still have a real, correct use
Not every element on a real page carries semantic meaning, and that's fine — <div> (block-level) and <span> (inline) exist specifically for grouping content purely for styling or scripting purposes, with no semantic claim attached. The goal isn't eliminating them entirely; it's reaching for a semantic element first when one genuinely fits, and using <div>/<span> honestly for the cases where nothing more specific applies.
Next: the real project starts — structuring Bright Leaf Coffee's actual homepage using everything covered in parts 1 through 7.