Semantic HTML

You can build an entire website out of <div>tags. It will render fine. It will also be invisible to screen readers, useless to search engines, and a nightmare to maintain. Semantic HTML is the difference between "it works" and "it works for everyone."

What "semantic" means

A semantic element is one that describes the meaning of its content, not just its appearance. <nav>says "this is navigation." <article>says "this is a self-contained piece of content." <div>says nothing. It's a box with no meaning, used when no semantic element fits.

The page-level landmarks

Modern HTML gives you a small set of landmarks for the major sections of a page. These names match what screen readers announce.

• <header> - top of a page or section. Usually has the logo and nav.
• <nav> - a group of navigation links. Site nav, breadcrumbs, in-article TOC.
• <main> - the unique content of this page. One per page. Skip-to-content links jump here.
• <article> - a self-contained piece of content that could stand alone: a blog post, a product card, a tweet.
• <section>- a thematic grouping of content, usually with a heading. "Pricing," "FAQ," "Reviews."
• <aside> - tangentially related content. A sidebar, a pull-quote, an ad.
• <footer> - bottom of a page or section. Copyright, links, contact.

Before: a wall of divs

Here's how most people write a page when they don't know better:

<div class="header">
  <div class="logo">Acme</div>
  <div class="menu">
    <div><a href="/">Home</a></div>
    <div><a href="/about">About</a></div>
  </div>
</div>

<div class="content">
  <div class="post">
    <div class="title">Hello</div>
    <div class="body">Some words.</div>
  </div>
</div>

<div class="footer">© 2026</div>

This renders fine. But a screen reader user hears: "group group group link link group group group" with no clue where the navigation ends or the main content begins.

After: the same page with semantics

<header>
  <h1>Acme</h1>
  <nav aria-label="Main">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Hello</h2>
    <p>Some words.</p>
  </article>
</main>

<footer>
  <p>© 2026 Acme</p>
</footer>

Same pixels on screen. Totally different experience for screen reader users, search engine crawlers, and reader-mode parsers. They get a map of the page.

Headings: the outline of your page

Headings (h1 through h6) aren't just big text. They form a hierarchy that screen reader users navigate by. The rules:

• One <h1> per page (typically the page title).
• Don't skip levels going down. After h1 the next should be h2, not h4.
• Pick headings by meaning, not by size. If you want smaller text, use CSS. Don't demote your h2 to h4 just to make it visually smaller.

Try this: in Chrome, install the "HeadingsMap" extension and open any site. You'll see the heading tree. Well-built sites look like a clean outline. Poorly built ones look like a jumble of leaves with no branches.

Why screen readers care

Screen readers expose landmark navigation: a user can press a key and jump to the next nav, the next main, the next article. They expose heading navigation: jump by heading level. Without semantic HTML, both of these collapse and the user has to listen linearly to everything.

Search engines benefit too. Google reads landmarks to figure out which chunk is navigation (low ranking weight) versus the article body (high ranking weight). Wrap your primary content in <main> with an <article> and you give Google a clearer signal than the cleverest schema.org annotations.

article vs section vs div: how to choose

• Would this make sense pulled out and read on its own? Probably an <article>. A blog post, a forum comment, a product card.
• Is it a chunk of related content with a heading? Probably a <section>. The "Pricing" part of a landing page.
• Is it just a grouping for layout/styling with no semantic meaning? <div>. Two-column grid containers, padding wrappers, etc.

Other useful semantic elements

• <figure> + <figcaption> - an image with a caption.
• <time datetime="2026-05-24"> - a date, machine-readable.
• <mark> - highlighted text (like search results).
• <details> + <summary> - a native disclosure widget. No JS needed.
• <address> - contact info for the page or article author.

Quick quiz

Recap

• Use semantic landmarks: header, nav, main, article, section, aside, footer.
• <div> is the fallback when nothing semantic applies. Not the default.
• Headings (h1-h6) form an outline. Don't skip levels. Don't pick by size.
• Screen readers and search engines both reward proper structure.
• "Could this stand alone?" → article. "Themed grouping with a heading?" → section. "Layout glue?" → div.