What is semantic HTML and why does it matter?

Semantic elements describe the meaning of content they help search engines, screen readers, and developers understand page structure.

HTMLAccessibilitySEO

Overview

Semantic HTML means using elements that convey the purpose of their content, not just their visual appearance. `<article>` tells browsers, search engines, and screen readers "this is a self-contained piece of content" `<div>` says nothing.

Key Points

•Key semantic elements: `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`.
•Text-level semantics: `<strong>` (important), `<em>` (emphasis), `<time>`, `<address>`, `<mark>`.
•SEO: search engines use semantic structure to understand content hierarchy.
•Accessibility: screen readers use landmarks (`<nav>`, `<main>`) to let users jump between sections.
•Code quality: semantic markup is self-documenting and easier to maintain.

Examples

Non-semantic vs semantic page structure

html

<!-- Non-semantic (avoid) -->
<div id="header"><div id="nav">...</div></div>
<div id="main"><div class="post">...</div></div>
<div id="footer">...</div>

<!-- Semantic (preferred) -->
<header><nav>...</nav></header>
<main><article>...</article></main>
<footer>...</footer>

Article with proper sub-structure

html

<article>
  <header>
    <h1>Getting Started with Git</h1>
    <time datetime="2025-06-10">June 10, 2025</time>
  </header>
  <section>
    <h2>Installation</h2>
    <p>...</p>
  </section>
  <footer>
    <address>By <a href="/authors/alice">Alice</a></address>
  </footer>
</article>

Pro Tip

The `<main>` element should appear only once per page and wraps the primary content. Pair it with `<header>` and `<footer>` at the page level these three alone give screen reader users a clear map of your page.