Semantic HTML (Reprise)

Picking the right HTML tag is the single most impactful accessibility decision you make. A consolidated guide.

Quick Reference

Anti-Patterns

<div onclick> instead of <button>

<!-- ✗ -->
<div onclick="save()">Save</div>

<!-- ✓ -->
<button type="button" onclick="save()">Save</button>

The div isn’t keyboard-focusable, screen readers don’t announce it as interactive, and it loses default styles. <button> solves all three.

Navigation with <div>s instead of <nav> and <ul>

<!-- ✗ -->
<div class="nav">
  <div><a href="/">Home</a></div>
</div>

<!-- ✓ -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

Screen readers offer a “list of links” view from real <nav>s.

Multiple <h1>s or skipped levels

One <h1> per page, no skipping levels. The next lesson goes deeper on heading hierarchy.

Linkified content with <span class="link">

If it acts like a link, it should be <a href="...">.

When <div> Is Correct

When the element has no semantic meaning — it’s a styling box, a grouping, or a flex/grid wrapper.

<div class="flex gap-4">
  <Avatar />
  <Card />
</div>

That’s fine. <div> is the right generic container.

The “Looks Like” Test

A “Save” link that visually looks like a button is still a link if clicking it navigates. Style it like a button — but use <a>.

Conversely, a “Read more” button that opens a new view is still a button if it does something — even if styled as text with an underline.

Up Next

ARIA — when semantic HTML isn’t enough.