Step 1

What does “semantic” mean?

A semantic tag has meaning — it tells the browser, search engines, and screen readers what a piece of content is. A <nav> is navigation; a <button> is a button. A plain <div> or <span> means nothing — it's a generic box.

Non-semantic ("div soup")

<div class="header">…</div>
<div class="nav">…</div>
<div class="main">…</div>

Semantic

<header>…</header>
<nav>…</nav>
<main>…</main>

Both render identically. But the semantic version communicates structure — and that's what makes it better for accessibility, SEO, and your own sanity six months from now.

Step 2

The page map: structural landmarks

Most pages share the same skeleton. These landmark elements mark the major regions — screen readers let users jump straight between them.

<nav>main menu / links

<main>the unique content of this page

<article> — a self-contained post

<section> — a themed group

<aside>side info, related links

One <main> per page. Everything that's unique to this page goes inside it — not the header, nav, or footer that repeat across the site.

Step 3

The structural landmarks

Introductory content for the page or a section — logo, site title, a section heading. You can have more than one.

<nav>

A block of major navigation links. Use it for the main menu and big in-page menus — not for every single link.

<main>

The one main content area unique to this page. Exactly one per page, and not nested inside header/nav/footer.

Closing content for the page or a section — copyright, contact, secondary links. Can also repeat per-section.

The skeleton in code

<body>
  <header>Logo & site title</header>
  <nav>Main menu</nav>
  <main>
    <article>This page's main content</article>
    <aside>Related / sidebar</aside>
  </main>
  <footer>© 2026</footer>
</body>

Step 4

Sectioning content: section, article, aside

A self-contained piece that would make sense on its own — a blog post, a news story, a product card, a comment. If you could syndicate it in an RSS feed, it's an article.

A thematic group of related content, usually with its own heading — “Features,” “Pricing,” “Reviews.” A chapter, not the whole book.

<aside>

Content tangentially related to what's around it — a sidebar, a pull quote, related links, an ad. Removing it wouldn't break the main point.

<div>

No meaning at all — a generic box only for styling or layout when no semantic element fits. The fallback, not the default.

Step 5

Which one do I use? A quick decision guide

When you're not sure, ask these questions in order:

Does it make sense completely on its own (could be reused or syndicated)?

→ Use <article> (a post, card, review, comment).

Is it a themed group of related content with a heading?

→ Use <section> (Features, FAQ, About).

Is it side info that complements but isn't essential?

→ Use <aside> (sidebar, related links, pull quote).

Is it just a wrapper for CSS/layout with no meaning?

→ Use <div> — that's what it's for.

Don't reach for <section> just to wrap things. If there's no natural heading and it's purely for styling, a <div> is the honest choice. A <section> should belong in the page's outline.

Step 6

Text-level semantic tags

Semantics aren't only about big regions. These inline tags add meaning to words — and unlike styling-only tags, they're announced by screen readers.

Tag	Means	Renders as
<strong>	Strong importance (not just bold)	Warning!
<em>	Emphasis / stress (not just italic)	really
<mark>	Highlighted / relevant text	match
<time>	A machine-readable date or time	<time datetime="2026-05-31">May 31</time>
<abbr>	An abbreviation, with a title	HTML
<blockquote>	A long quotation from a source	an indented quote
<figure>/<figcaption>	An image/diagram with its caption	image + caption

Meaning over looks: use <strong>/<em> when the words matter more, and <b>/<i> only for pure visual styling with no added importance (rare). For anything visual, CSS is usually the better tool.

Step 7

Headings build the document outline

Headings (<h1>–<h6>) aren't just big text — they create an outline screen-reader users navigate like a table of contents. Use them in order; don't skip levels for size (that's CSS's job).

<h1>Page title</h1>           one per page
  <h2>Major section</h2>
    <h3>Subsection</h3>
  <h2>Another major section</h2>

Don't pick a heading by size. Need a smaller-looking heading? Keep the correct level (<h3>) and shrink it with CSS — never jump from <h2> to <h4> just to make it look right.

Step 8

From div soup to semantic

Here's the same page written both ways. Same pixels — very different meaning.

Before

<div class="top">
  <div class="logo">Wren</div>
  <div class="menu">…</div>
</div>
<div class="content">
  <div class="post">
    <div class="title">Hello</div>
    <div class="text">…</div>
  </div>
</div>
<div class="bottom">© 2026</div>

After

<header>
  <div class="logo">Wren</div>
  <nav>…</nav>
</header>
<main>
  <article>
    <h1>Hello</h1>
    <p>…</p>
  </article>
</main>
<footer>© 2026</footer>

Notice the logo wrapper stayed a <div> — that's correct, it's just a styling box. Everything with real meaning got a semantic tag.

Step 9

Why it's worth the effort

Accessibility

Screen-reader users jump between landmarks and headings. Semantic HTML gives them that map for free.

SEO

Search engines understand structure — what's the main content, what's navigation, what's the heading hierarchy.

Maintainable

<nav> and <footer> tell the next developer (and future you) exactly what each block is.

Less work

Default behavior & styling hooks come built in — you write less code to get correct, accessible results.

Step 10

Semantic checklist

One <main> per page, with the unique content inside it
<header>, <nav>, and <footer> mark the repeating regions
Self-contained items are <article>; themed groups are <section> (with a heading)
<div> only where there's no meaning — pure layout/styling
One <h1>, then <h2> → <h3> in order, no skipped levels
<strong>/<em> for meaning; CSS for looks
Real <button> and <a> instead of clickable <div>s

Step 11

Every tag on one page

Here's a complete little page built almost entirely from semantic tags — a mini blog article with a header, navigation, sidebar, and footer. First the rendered result, then the exact code below. See how many tags from this lesson you can spot.

The rendered page

The Daily Pixel

Why Semantic HTML Matters

Published June 7, 2026

Written by Dr. G

Semantic markup is important and genuinely changes how machines read your page. Searching for semantic HTML returns millions of results. The W3C sets the standards, and a landmark is a major region of a page.

Water is H₂O and 2¹⁰ = 1024. Was ~~$50~~, now $40. We ~~removed this~~ added this. Press Ctrl+S to save; it printed Saved!. The variable x holds the total. const x = 1; Prices include tax.

A randomly generated landscape — Figure 1 — A photo with its caption, grouped in a figure.

What people say

Good structure is invisible until it's missing.
The Elements of Typographic Style

As they say, meaning beats appearance.

Quick facts

Unordered list (order doesn't matter)

Readable by screen readers
Better for SEO

Ordered list (steps in sequence)

Write semantic tags
Validate
Ship

Description list (term + definition)

HTML: Structure and content.
CSS: Styling and layout.

A fifth-level heading

A sixth-level heading

Your progress

Lesson completion: 80%

Quiz score: 9 out of 10

3 + 4 = 7

Bonus: what's a disclosure widget?

It's this expandable box — built from details and summary, no JavaScript needed.

The code (styling omitted so the tags stand out)

<header>
  <h1>The Daily Pixel</h1>
  <nav aria-label="Primary">
    <a href="#">Home</a>
    <a href="#">Articles</a>
    <a href="#">About</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>Why Semantic HTML Matters</h2>
      <p>Published <time datetime="2026-06-07">June 7, 2026</time></p>
      <address>Written by Dr. G</address>
    </header>

    <p>Semantic markup is <strong>important</strong> and genuinely
       <em>changes</em> how machines read your page. Searching for
       <mark>semantic HTML</mark> returns millions of results. The
       <abbr title="World Wide Web Consortium">W3C</abbr> sets the
       standards, and a <dfn>landmark</dfn> is a major page region.</p>

    <p>Water is H<sub>2</sub>O and 2<sup>10</sup> = 1024.
       Was <s>$50</s>, now $40. We <del>removed this</del>
       <ins>added this</ins>. Press <kbd>Ctrl</kbd>+<kbd>S</kbd> to
       save; it printed <samp>Saved!</samp>. The variable
       <var>x</var> holds the total. <code>const x = 1;</code>
       <small>Prices include tax.</small></p>

    <figure>
      <img src="photo.jpg" alt="A landscape">
      <figcaption>Figure 1 — A photo with its caption.</figcaption>
    </figure>

    <section>
      <h3>What people say</h3>
      <blockquote>
        <p>Good structure is invisible until it's missing.</p>
        <cite>The Elements of Typographic Style</cite>
      </blockquote>
      <p>As they say, <q>meaning beats appearance</q>.</p>
    </section>

    <section>
      <h3>Quick facts</h3>
      <h4>Unordered list</h4>
      <ul>
        <li>Readable by screen readers</li>
        <li>Better for SEO</li>
      </ul>
      <h4>Ordered list</h4>
      <ol>
        <li>Write semantic tags</li>
        <li>Validate</li>
        <li>Ship</li>
      </ol>
      <h4>Description list</h4>
      <dl>
        <dt>HTML</dt><dd>Structure and content.</dd>
        <dt>CSS</dt><dd>Styling and layout.</dd>
      </dl>
      <h5>Fifth-level heading</h5>
      <h6>Sixth-level heading</h6>
    </section>

    <section>
      <h3>Your progress</h3>
      <p>Completion: <progress value="80" max="100">80%</progress></p>
      <p>Score: <meter value="9" min="0" max="10">9/10</meter></p>
      <p>3 + 4 = <output>7</output></p>
    </section>

    <details>
      <summary>Bonus: what's a disclosure widget?</summary>
      <p>This expandable box — no JavaScript needed.</p>
    </details>

    <footer>
      <p>Filed under HTML · <a href="#">3 comments</a></p>
    </footer>
  </article>

  <aside>
    <h3>Related</h3>
    <nav aria-label="Related">
      <ul>
        <li><a href="#">Accessibility basics</a></li>
        <li><a href="#">Heading outlines</a></li>
      </ul>
    </nav>
    <button onclick="myDialog.showModal()">Open a dialog</button>
    <dialog id="myDialog">
      <h3>Native dialog</h3>
      <p>A real &lt;dialog&gt; element.</p>
      <form method="dialog"><button>Close</button></form>
    </dialog>
  </aside>
</main>

<footer>
  <p><small>© 2026 The Daily Pixel.</small></p>
</footer>

Spot the tags: this one page uses header, nav, main, article, section, aside, footer, h1–h6, figure, blockquote, ul/ol/dl, details, progress, meter, dialog, and a dozen inline tags — with only one div-free structure holding it together.

Where next

Keep going

Semantic HTML ReferenceEvery semantic element with a live example. HTML BasicsThe fundamentals, from the ground up. AccessibilitySemantic HTML is the biggest a11y win. Validate Your PageCheck your markup follows the rules.