Semantic HTML

You can build any page with nothing but <div> and <span>. The page will look identical in a browser. But a browser rendering pixels is not the only consumer of your HTML — search engine crawlers, screen readers, and browser extensions all read the same source, and to them, a document made of <div>s is opaque.

Semantic HTML means choosing elements based on the meaning of the content, not the visual outcome. It costs nothing extra and pays dividends in accessibility, search ranking, and long-term maintainability.

The div soup problem

Here is a typical page structure written with generic containers:

<div class="header">
  <div class="nav">…</div>
</div>
<div class="main">
  <div class="article">…</div>
  <div class="sidebar">…</div>
</div>
<div class="footer">…</div>

To a sighted reader the class names suggest structure. To a screen reader, it is a flat sequence of divs with no landmarks. A user navigating by heading or region will find nothing to jump to. A search engine has no signal about which <div> holds the main content.

Now compare:

<header>
  <nav>…</nav>
</header>
<main>
  <article>…</article>
  <aside>…</aside>
</main>
<footer>…</footer>

Every <header>, <nav>, <main>, <article>, <aside>, and <footer> carries a built-in ARIA landmark role. Screen reader users can jump directly between landmarks. Browsers can offer a reader mode that extracts the <article>. Search engines know which content is primary.

Page-level landmarks

These elements define the major regions of a page:

Heading hierarchy

Headings communicate structure. The browser and screen readers both use them to let users scan or skip:

<h1>The Ancient Art of Bread Baking</h1>

<h2>A Brief History</h2>
<p>…</p>

<h2>Equipment</h2>
<h3>The Dutch Oven</h3>
<p>…</p>
<h3>The Banneton</h3>
<p>…</p>

<h2>Your First Loaf</h2>
<h3>Mixing and Hydration</h3>
<p>…</p>

Rules:

• One <h1> per page — the main title.
• Do not skip levels (<h1> then <h3> with no <h2>) — this confuses screen readers.
• Choose the level based on structural rank, not desired visual size. Use CSS to change appearance; use the right element for meaning.

Text-level semantics

Within a paragraph, some elements add precise meaning:

<!-- Stress emphasis — changes how the sentence is read aloud -->
<p>You <em>must</em> save before closing.</p>

<!-- Strong importance — something serious or urgent -->
<p><strong>Warning:</strong> this action cannot be undone.</p>

<!-- A quotation with a source -->
<blockquote cite="https://www.w3.org/TR/html52/">
  <p>Semantic elements describe the meaning of content.</p>
</blockquote>

<!-- A date, optionally machine-readable -->
<p>Published <time datetime="2024-03-15">March 15, 2024</time>.</p>

<!-- An image with a caption -->
<figure>
  <img src="sourdough.jpg" alt="A round sourdough loaf on a wooden board">
  <figcaption>A 75% hydration country loaf after a cold retard.</figcaption>
</figure>

The distinction between <em> and <strong> matters for screen readers. <em> signals a change in vocal stress — "you must save." <strong> signals importance, often rendered with a warning tone. Using them interchangeably because they "look bold/italic" breaks that meaning.

When to use div and span

<div> and <span> are fine for grouping without semantic meaning — when you need a hook for CSS styling or JavaScript and no semantic element fits:

<!-- Needed purely for layout purposes — no semantic element applies -->
<div class="card-grid">
  <article>…</article>
  <article>…</article>
</div>

The question to ask: is there a more specific element that describes this content? If yes, use it. If the answer is genuinely "no semantic meaning applies here," then <div> or <span> is the right choice.

Check your understanding

Where to go next

You can mark up content meaningfully. Next: Attributes, Links, and Images — how to attach extra information to elements, and the two elements that depend entirely on attributes to do their job.