HTML semantics in plain English

Semantics means meaning. Some HTML elements say “this part is navigation” or “this is the main content.” Generic <div> and <span> say only “this is a box” — no built-in role.

Assistive technologies use semantics to navigate. Search engines use them as signals. You use them to read a file six months later.

Landmarks you should know first

Element	Plain-language role
<header>	Top-of-page intro: logo, site title, sometimes nav
<nav>	Block of major navigation links
<main>	Primary content — usually once per page
<footer>	Footer: contact repeats, small print, secondary links
<section>	Thematic grouping when you need a heading inside it
<article>	Self-contained content (post, card story) when appropriate

Not every page needs every element. When unsure, prefer honest structure: one <main>, sensible headings, no fake landmarks.

Div soup versus meaning

Div soup: everything is <div class="…"> — you cannot tell what anything is without reading every class name.

Semantic markup: even without CSS, a human (or assistive tech) can outline the page.

Your capstone expects semantic HTML. Semantics are evidence, not decoration.

Example — same layout, different meaning

Div-only (weak):

<div class="top"><div class="logo">My Site</div></div>
<div class="middle">
  <div class="title">Welcome</div>
  <p>Text…</p>
</div>
<div class="bottom">Contact</div>

More semantic (stronger):

<header><p class="logo">My Site</p></header>
<main>
  <h1>Welcome</h1>
  <p>Text…</p>
</main>
<footer>Contact</footer>

In the second version, a screen reader user can jump to main and hear the real page title as a heading. In the first, “Welcome” might look like a title but live in a <div>.

When <div> is still OK

<div> is generic, not evil. Use it for layout wrappers inside a semantic region when no other element fits. The anti-pattern is only divs everywhere.

Do this — label and rewrite (20 minutes)

Part A — Label these lines as semantic or generic with one rationale each:

<nav>
  <a href="/">Home</a>
</nav>
<div class="hero">Sale today</div>
<main>
  <h1>Products</h1>
</main>

Part B — Rewrite (stretch)

Take a div-heavy draft — your my-static-site/index.html, a Module 03 save, or the weak example above. Rewrite only structure: add <main>, promote the real title to <h1>, wrap navigation in <nav> if appropriate.

Part C — Maintenance (short paragraph)

In six to eight sentences, describe one time semantic HTML would make a page easier to maintain when you return in six months.

Optional depth

ARIA, forms, lists, buttons, and talking to stakeholders: HTML semantics — extended notes.

What's next

Next up: Heading order and one main idea per level