Semantic HTML elements are tags that describe their meaning, not just their appearance. A <div> tells the browser "here's a generic box" — it carries zero information about what's inside. A <nav> tells the browser, screen readers, and search engines "this is navigation," which is a meaningful difference even though both might look identical with the same CSS applied.

Before semantic tags existed, developers built entire pages out of nested <div> elements with class names like class="header" or class="nav" to fake structure. It worked visually, but it gave assistive technology and search engines nothing to actually parse.

Why Semantic Elements Matter

Two groups benefit directly: screen reader users, who can jump straight to a page's <nav> or <main> content instead of listening through every div; and search engines, which use semantic structure as a signal for what content actually matters on the page (this is part of basic on-page SEO). A third, quieter benefit is for you and your team — semantic markup is simply easier to read six months later than a wall of unlabeled divs.

The Core Layout Elements

Here's a typical page layout built entirely from semantic elements instead of divs:

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>My First Post</h2>
      <section>
        <p>Some content about this post...</p>
      </section>
    </article>

    <aside>
      <h3>Related Posts</h3>
    </aside>
  </main>

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

This renders a conventional blog layout: a header with a title and nav links at the top, a main content area holding the article and a sidebar, and a footer at the bottom — but every piece is tagged with what it actually is, not just a div with a class name.

What Each Element Means

<header> is introductory content for its nearest section or the whole page. <nav> wraps major navigation links (not every link on the page — just the primary navigation menus). <main> holds the one piece of content unique to this specific page, and should only appear once. <article> is self-contained content that would make sense distributed on its own, like a blog post or news story. <section> groups related content within an article or page, usually with its own heading. <aside> is tangentially related content, like a sidebar. <footer> is closing content for its section or the page.

When a div Is Still the Right Choice

Semantic elements aren't a replacement for every div — they're for content that has real semantic meaning. A purely visual wrapper that exists only to apply a CSS grid or flex layout, with no meaning of its own, is exactly what <div> is still for. Don't force a <section> onto something just to avoid using a div.

Once your structure is semantic, you'll usually reach for these same wrapper elements as the containers in a Flexbox or CSS Grid layout.