Semantic HTML

Semantic HTML means using elements that describe what the content is, not just how it should look. <nav> tells the browser (and every tool reading the page) “this is navigation.” A <div> tells it nothing at all.

div and span vs semantic elements

<div> and <span> are generic containers. They have no meaning, they exist purely so you have something to attach CSS or JavaScript to.

<!-- Tells you nothing about what this is -->
<div class="site-header">
  <div class="site-title">My Site</div>
  <div class="nav">
    <div><a href="/">Home</a></div>
    <div><a href="/about">About</a></div>
  </div>
</div>

<!-- The same structure, but the tags themselves say what it is -->
<header>
  <h1>My Site</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

Both examples can look identical once styled. The difference is invisible to sighted users and enormous for everyone else: screen readers, search engines, and browser extensions like reader mode all rely on semantic elements to understand a page’s structure. A <div>-only page gives them nothing to work with.

That doesn’t mean <div> and <span> are bad, they’re the right choice when there’s genuinely no more specific element that fits. Reach for a semantic element first, and fall back to <div>/<span> only when nothing else describes the content.

The main semantic elements

`<header>`

Introductory content for a page or a section: a logo, a site title, a navigation menu.

<header>
  <h1>My Site</h1>
  <nav>...</nav>
</header>

`<nav>`

A block of navigation links. Not every group of links needs <nav>, use it for major navigation blocks like a main menu or breadcrumbs, not for a couple of links inside body text.

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

`<main>`

The main content of the page, unique to that page. Use it once per page. Don’t put repeated content like headers, footers, or sidebars inside it.

<main>
  <h1>Blog post title</h1>
  <p>Post content...</p>
</main>

`<section>`

A group of content with its own theme, usually with its own heading. A page can have several sections.

<section>
  <h2>Latest posts</h2>
  <article>...</article>
  <article>...</article>
</section>

`<article>`

Content that could stand alone and make sense on its own: a blog post, a news story, a product card, a comment.

<article>
  <h2>How to bake sourdough</h2>
  <p>Posted by Amina on July 18, 2026</p>
  <p>...</p>
</article>

The difference between <section> and <article> trips a lot of people up: ask whether the content would still make sense if you pulled it out and put it on its own page or in an RSS feed. If yes, it’s an <article>. If it’s just one themed grouping within the page, it’s a <section>.

`<aside>`

Content related to the main content but not part of it: a sidebar, a pull quote, a list of related links.

<aside>
  <h2>Related posts</h2>
  <ul>
    <li><a href="/posts/2">Post two</a></li>
    <li><a href="/posts/3">Post three</a></li>
  </ul>
</aside>

`<footer>`

Closing content for a page or a section: copyright, contact details, footer links.

<footer>
  <p>&copy; 2026 My Site</p>
</footer>

A full page example

<body>
  <header>
    <h1>My Site</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/blog">Blog</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Latest posts</h2>

      <article>
        <h3>How to bake sourdough</h3>
        <p>An introduction to your first loaf.</p>
      </article>

      <article>
        <h3>Choosing a flour</h3>
        <p>What to look for at the store.</p>
      </article>
    </section>

    <aside>
      <h2>About the author</h2>
      <p>Amina writes about home baking.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 My Site</p>
  </footer>
</body>

Why this matters

Screen reader users can pull up a list of a page’s landmarks (header, nav, main, footer) and jump straight to the one they want, the same way sighted users glance at a page layout and know where the navigation is. Search engines use the same structure to understand which part of the page is the actual content versus boilerplate like navigation and footers. See Page Landmarks for how that landmark navigation actually works.

Common mistakes

Using <div class="header"> instead of <header>. The class name only helps CSS, it does nothing for screen readers.
Using more than one <main> per page.
Wrapping every single element in a <section> “just in case.” A <section> should have its own clear theme, usually marked by its own heading.
Treating <article> and <section> as interchangeable. Ask “would this make sense on its own?” to decide.

FAQ

Do I need to use every semantic element on every page?

No. Use the ones that genuinely describe your content’s structure. A simple page might only need <header>, <main>, and <footer>.

Is <div> ever the right choice over a semantic element?

Yes, for purely presentational grouping with no independent meaning, like a wrapper used only to control a CSS Grid layout.

Semantic HTML

div and span vs semantic elements

The main semantic elements

<header>

<nav>

<main>

<section>

<article>

<aside>

<footer>