Episode 1 — Fundamentals / 1.5 — Semantic HTML and Browser Rendering

1.5.c — Semantic Landmark Tags

In one sentence: Landmarks are HTML elements that label regions of the page so humans, screen readers, and keyboard users can jump directly to “main content,” “navigation,” or “supporting info” instead of tabbing through noise.

Navigation: ← 1.5.b — Reflow & Repaint · 1.5.d — SEO & semantics →

1. Why not `<div id="header">` everywhere?

div + class can look fine visually, but:

Screen readers expose landmark roles for native elements (<nav>, <main>) in rotors (jump menus).
Teams get consistent document structure across pages — easier code review and onboarding.
SEO benefits indirectly: clearer structure often correlates with clearer headings and content grouping (see 1.5.d).

Native first: prefer the right element; add ARIA only when native semantics are impossible (see 1.5.e).

2. Core landmarks (HTML5)

Element	Typical use	Notes
`<header>`	Introductory content for nearest sectioning ancestor or page	Not automatically “banner” in all cases — avoid dozens per page without reason
`<nav>`	Major navigation blocks (primary nav, in-page TOC)	Skip wrapping every tiny link list — use for meaningful navigation regions
`<main>`	Primary content of the document	At most one `main` per document (unless using shadow DOM/islands carefully — default learning rule: one main)
`<aside>`	Supporting content (related links, sidebars, pull quotes)	Tangential to nearby content
`<footer>`	Footer for section or page	Legal, meta links, copyright

`section` vs `article`

Element	Mental model
`<section>`	Thematic grouping with a heading — a chapter inside the story
`<article>`	Self-contained composition (blog post, card that could syndicate, comment)

Anti-pattern: wrapping every widget in <article> “for SEO.” Use meaning, not superstition.

3. Document sketch (good citizen)

<body>
  <header>… branding …</header>
  <nav aria-label="Primary">…</nav>
  <main>
    <h1>Page title</h1>
    <section aria-labelledby="features-heading">
      <h2 id="features-heading">Features</h2>
      …
    </section>
  </main>
  <aside>… related …</aside>
  <footer>… legal …</footer>
</body>

aria-label on nav: when you have multiple nav regions (“Primary”, “Footer”).

4. Heading outline ties landmarks together

Landmarks without a sensible heading hierarchy are half the win. Headings are covered in depth in 1.5.f.

5. Key takeaways

<main> should be unique and contain the primary user task content.
Multiple <nav> elements are fine — distinguish them with aria-label or visible headings.
section/article are for document structure, not CSS hooks — class handles styling.
Landmarks improve skip navigation and screen reader efficiency.

Explain-It Challenge

Explain without notes:

Why a page should not contain two unlabeled <main> elements.
When <aside> is appropriate vs a generic <div class="sidebar">.
The difference between <section> and <article> using a blog + comments example.