<!-- ❌ Div soup -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>

<!-- ✅ Semantic HTML -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

<!-- article: Self-contained, could be extracted -->
<article>
  <h2>Blog Post Title</h2>
  <p>Content that makes sense on its own...</p>
</article>

<!-- section: Thematic grouping with heading -->
<section>
  <h2>Features</h2>
  <p>Content about features...</p>
</section>

<!-- div: No semantic meaning, just styling -->
<div class="card-grid">
  <article>...</article>
  <article>...</article>
</div>

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

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li aria-current="page">This Post</li>
  </ol>
</nav>

<!-- ❌ Fake button -->
<div class="button" onclick="submit()">Submit</div>

<!-- ✅ Real button -->
<button type="submit">Submit</button>

<!-- ❌ Fake link -->
<span class="link" onclick="navigate()">Click here</span>

<!-- ✅ Real link -->
<a href="/page">Click here</a>

<figure>
  <img src="chart.png" alt="Sales growth chart">
  <figcaption>Q4 2025 sales increased by 40%</figcaption>
</figure>

<figure>
  <pre><code>const x = 1;</code></pre>
  <figcaption>Variable declaration in JavaScript</figcaption>
</figure>

<p>Posted on <time datetime="2026-01-29">January 29, 2026</time></p>

<p>Event starts at <time datetime="14:30">2:30 PM</time></p>