Semantic HTML: Why It Matters for SEO, Accessibility & Maintainability

A <div> with a class of "header" and a <header> element look the same to users. But to search engines, screen readers, and other developers, they're completely different. Semantic HTML uses elements that describe the meaning of content, not just its appearance. This guide covers every semantic element you should be using — and why.

Non-Semantic vs Semantic

<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">My Blog Post</div>
    <div class="content">...</div>
  </div>
  <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

<header>
  <nav aria-label="Main navigation">
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>My Blog Post</h1>
    <p>...</p>
  </article>
  <aside>...</aside>
</main>
<footer>...</footer>

The Semantic Elements

<header>

Introductory content for the page or a section. Typically contains the site logo, navigation, and search bar. Can be used inside <article> or <section> for section-specific headers.

<nav>

A section of navigation links. Use for primary navigation, breadcrumbs, table of contents. Not every group of links is a <nav> — only major navigation blocks.

<main>

The primary content of the page. There should be only one <main> per page. Excludes header, footer, and sidebar content that repeats across pages.

<article>

A self-contained piece of content that could be independently distributed — a blog post, a news article, a product card, a comment. If it makes sense on its own (in an RSS feed, for example), it's an article.

<section>

A thematic grouping of content, typically with a heading. Use when <article> isn't appropriate but the content forms a distinct section of the page.

<aside>

Content tangentially related to the surrounding content — sidebars, pull quotes, related links, ads. Can be inside or outside <article>.

<footer>

Footer content for the page or section — copyright, contact info, legal links, sitemap.

<figure> and <figcaption>

<figure>
  <img src="chart.png" alt="Monthly revenue chart showing 20% growth">
  <figcaption>Fig. 1: Monthly revenue growth Q1-Q2 2025</figcaption>
</figure>

<time>

<time datetime="2025-07-08">July 8, 2025</time>
<time datetime="2025-07-08T14:30:00Z">2:30 PM UTC</time>

Heading Hierarchy

<!-- ✅ Correct — logical hierarchy -->
<h1>Page Title</h1>
  <h2>Major Section</h2>
    <h3>Sub-section</h3>
    <h3>Another Sub-section</h3>
  <h2>Another Major Section</h2>

<!-- ❌ Wrong — skipped levels -->
<h1>Page Title</h1>
  <h4>Random heading</h4>  <!-- Skipped h2 and h3! -->

Why Semantic HTML Matters

• SEO: Search engines use semantic elements to understand your page structure. A <nav> tells Google "these are navigation links." An <article> tells it "this is the main content."
• Accessibility: Screen readers use semantic elements as landmarks. A blind user can jump directly to <main>, skip the <nav>, or browse by <article>.
• Maintainability: <header> is instantly understood by any developer. <div class="hdr-wrap"> requires investigation.
• Reader Mode: Browser reader modes (Safari, Firefox) use <article> to extract the main content.