Blog
3 min read

Semantic HTML: What It Is and Why It Matters (With Examples)

Semantic HTML means using tags that describe what content is — header, nav, main, article, button — instead of divs for everything. Why it matters for accessibility, SEO and maintainability, the tags to know, and the div-soup mistakes AI-generated code often makes.

Semantic HTML means choosing HTML tags for what content is, not just how it should look. A navigation menu goes in <nav>, a button is a <button>, the main content goes in <main>.

The opposite is "div soup" — everything wrapped in <div> and <span>, with meaning added only through class names.

The difference

Div soup:

<div class="header">
  <div class="logo">Acme</div>
  <div class="menu">
    <div class="link" onclick="go('/pricing')">Pricing</div>
  </div>
</div>
<div class="content">
  <div class="title">Our story</div>
  <div class="text">…</div>
</div>

Semantic:

<header>
  <a href="/" class="logo">Acme</a>
  <nav>
    <a href="/pricing">Pricing</a>
  </nav>
</header>
<main>
  <article>
    <h1>Our story</h1>
    <p>…</p>
  </article>
</main>

They can look identical. They behave very differently.

Why it matters

1. Accessibility

Screen readers use these tags to describe the page and let people jump around: "go to main content", "list headings", "next link". A <div> styled as a button can't be reached with the Tab key or pressed with Enter unless you add a lot of extra code. A <button> does all of that for free. (Web accessibility basics)

2. SEO

Search engines use headings, <main>, <article> and links to understand what the page is about and what's important. A link that's a real <a href> can be followed; a <div onclick> can't. (SEO basics for your app)

3. Free behaviour

Real elements come with built-in behaviour: links open in new tabs with Ctrl/Cmd-click, forms submit with Enter, <details> expands and collapses without JavaScript, <dialog> handles focus.

4. Readable code

<nav> tells the next person (or AI tool) what that block is immediately.

The tags to know

Tag Use for
<header> Intro area of a page or section (logo, nav)
<nav> Main navigation links
<main> The page's main content — one per page
<article> Self-contained content (a post, a product card)
<section> A themed group of content, usually with a heading
<aside> Side content (related links, sidebar)
<footer> Footer of a page or section
<h1>–<h6> Headings, in order — one <h1> per page
<button> Anything that performs an action
<a href> Anything that goes somewhere
<form>, <label>, <input> Forms, with labels linked to inputs
<ul>/<ol>/<li> Lists, including menus
<figure>/<figcaption> Images with captions
<time> Dates and times
<table> Real tabular data (not layout)

The most common mistakes

  1. <div onClick> instead of <button>. The most common accessibility bug in AI-generated React code.
  2. Buttons that navigate, links that act. If it changes the URL, use <a>; if it does something on the page, use <button>.
  3. Skipping heading levels or using headings for size. Pick the level by structure; set size with CSS.
  4. Inputs without labels. Placeholder text isn't a label.
  5. Images without alt text. Describe the image, or use alt="" for decorative ones.

Quick check

Install a browser accessibility checker (Lighthouse is built into Chrome DevTools), or ask your AI tool: "review this page for semantic HTML and accessibility problems and fix them". It's one of the tasks AI does well.

EasySpawn runs your site on a fast server with HTTPS, and Claude Code can audit and fix your markup while you watch the live page. See how it works or join the waitlist.

Related: Web Accessibility Basics · HTML, CSS, and JavaScript Explained · SEO Basics for Your App · What Is JSX?

Keep reading