Semantic HTML

Course 1 · Ch 8
Semantic HTML
header, nav, main, article, section, footer — describing a page's structure meaningfully, not just visually

Every chapter so far has touched on semantic meaning for specific pieces of content — headings, text emphasis, lists, tables. This chapter applies the same principle at the level of overall page layout: describing what role each major region of a page plays, using purpose-built tags instead of generic containers.

A Typical Page, Structured Semantically

<header>
Site logo, title, primary navigation — the top of the page
<nav>
The main navigation menu, often inside header
<main>
The primary, unique content of THIS page — exactly one per page
<article>
A self-contained piece of content — a blog post, a news story
<section>
A thematic grouping within the content, usually with its own heading
<footer>
Copyright, contact info, secondary links — the bottom of the page

The Elements, One at a Time

<header>
Introductory content for the page (or for a section/article within it — header isn't exclusively a page-top element). Often contains the logo and main navigation.
<nav>
A block of navigation links — the main menu, a table of contents, breadcrumbs. Not every group of links needs <nav>, just the genuinely major navigation blocks.
<main>
The dominant, unique content of the page — excludes repeated elements like the header, footer, and sidebar navigation. Exactly one <main> per page.
<article>
Content that would make sense distributed/syndicated on its own — a blog post, a forum post, a news article. The test: "could this stand alone elsewhere and still make sense?"
<section>
A thematic grouping of content, typically with its own heading — less independent than <article>, more meaningful than a generic <div>.
<aside>
Content tangentially related to the main content — a sidebar, a pull quote, related links — not essential to understanding the primary content.
<footer>
Closing content — copyright, contact details, sitemap links. Like header, can apply to the whole page or to an individual section/article.

article vs section — The Distinction That Actually Trips People Up

This is the single most commonly confused pair in semantic HTML. The practical test: would this content still make complete sense if it were pulled out and placed entirely on its own, somewhere else?

// A blog post — genuinely independent, could be syndicated via RSS as-is <article> <h2>How to Set Up a Raspberry Pi</h2> <p>...</p> </article> // A themed grouping WITHIN that article — not independent on its own <article> <h2>How to Set Up a Raspberry Pi</h2> <section> <h3>Required Hardware</h3> <p>...</p> </section> </article>
It's genuinely fine if a page only uses a div in some cases
Not every grouping needs a semantic tag — a <section> without its own heading, used purely as a styling hook, is arguably better written as a plain <div>. The semantic elements in this chapter exist for cases where the grouping carries real, document-outline-relevant meaning — forcing semantic tags onto every container for their own sake misses the actual point.

Why This Matters Beyond Just Convention

  • Screen readers let users jump directly between landmarks (header, nav, main, footer) — genuine, measurable navigation efficiency for assistive technology users.
  • Search engines use this structure to better understand which content on a page is the primary content versus boilerplate navigation/footer text.
  • Other developers (including future you) read semantically structured markup faster than a page built entirely from generically named divs.
"div soup" — an entire page built from nested, unlabelled divs — is the thing this chapter exists to prevent
A page where every region is <div class="top">, <div class="content">, <div class="bottom"> works visually but conveys zero structural meaning to anything other than a sighted human reading the rendered page — exactly the gap semantic HTML closes.

Chapter 8 Quick Reference

  • header / nav / main / footer — top-level page landmarks; exactly one <main> per page
  • article — independently meaningful content (could stand alone elsewhere)
  • section — thematic grouping, usually with its own heading, less independent than article
  • aside — tangentially related content, not essential to the main content
  • article vs section test: "would this make sense entirely on its own, elsewhere?"
  • Not every container needs a semantic tag — a plain div is fine for purely visual/styling groupings
  • Why it matters: screen reader landmark navigation, SEO content understanding, and human readability of the source
  • Next chapter: divs & spans — generic containers, and when to use them vs semantic tags