Semantic HTML: Markup That Describes Itself

Semantic HTML means the tag means what it wraps. An <article> is a self-contained piece of content. A <nav> is a set of navigation links. A <time datetime="..."> is a date a machine can read. Every semantic element you use is documentation you did not have to write — and accessibility you did not have to bolt on.

The mental test

Ask one question: what is this thing? Not "what should it look like" — what is it. If the honest answer is "a list of articles", write <ul><li>, not three <div class="card">. Appearance is CSS's job. Meaning is HTML's.

The div disease

Real-world audit exercise: open any busy production page and count the divs. On badly-built pages you will find <div class="header">, <div class="nav">, <div class="btn"> — elements that already exist as <header>, <nav>, and <button>. Each fake element costs real money: no keyboard focus, no role, no search engine understanding, and a screen-reader experience of "landmark, landmark, landmark" with no map.

A semantic blog card, the way a screen reader hears it

<article>
  <h2><a href="/posts/web-development">Web Development from First Principles</a></h2>
  <p><time datetime="2026-10-02">Oct 2, 2026</time> · 7 lessons</p>
  <p>Build web pages the way experienced front-end engineers do…</p>
</article>

A screen reader announces: "article — Web Development from First Principles, link — Oct 2 2026, 7 lessons." The same card built from divs announces: nothing meaningful at all.

Try it yourself

// Screen readers build a "landmark" list — same as this:
const landmarks = { header: 1, nav: 2, main: 1, footer: 1 };
for (const [region, count] of Object.entries(landmarks)) {
  console.log(region + ":", count);
}

SEO is a side effect

Crawlers weight content by the elements around it. Content in <main> and <article> is clearly the payload; a <div class="content"> is a guess. Semantic HTML is the cheapest SEO you will ever do.