Semantic HTML Elements

Semantic HTML means choosing elements based on the meaning of the content they contain, not just how they happen to look. A <div> tells a browser and a screen reader nothing about what's inside it; a <nav> or <article> tells them exactly what role that content plays on the page.

Using semantic elements is not a stylistic preference — it directly affects accessibility (screen readers use these landmarks to let users jump between sections), SEO (search engines weigh semantically marked-up content differently), and long-term maintainability of your codebase.

Why it matters

A page built only from div elements looks fine but tells a screen reader or a search engine nothing about which part is the navigation, the main content or the footer. Semantic elements carry that meaning for free. They are the base of accessibility and SEO, and interviewers ask about them constantly.

Core Layout Semantic Elements

HTML5 introduced a set of elements specifically to describe common page regions, replacing the old convention of using generically named <div id="header"> or <div class="nav"> containers.

• <header> — introductory content for a page or a section, often containing a logo, title, or navigation.
• <nav> — a block of primary navigation links.
• <main> — the single, unique main content of the document (only one per page).
• <article> — a self-contained piece of content that would make sense on its own, like a blog post or news story.
• <section> — a thematic grouping of content, usually with its own heading.
• <footer> — closing content for a page or section, often containing copyright info or secondary links.

Semantic Elements vs. Generic div

A <div> is a generic container with no inherent meaning — it exists purely for grouping and styling. Semantic elements should be used whenever an appropriate one exists, and <div> should be reserved for cases where no semantic element fits (a purely visual wrapper for a CSS grid layout, for example). Overusing <div> for everything is sometimes called "divitis," and it strips a page of the structural meaning that assistive technology and search engines depend on.

How This Helps Accessibility and SEO

Screen readers build a navigable outline of a page using landmark elements like <nav>, <main>, and <header>, letting users skip directly to the content they want instead of tabbing through everything. Search engines similarly use semantic structure to better understand which part of a page is the primary content versus supporting material like navigation or a sidebar.

Example

<body>
  <header>
    <h1>Webnest Studio</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/blog">Blog</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Why Semantic HTML Matters</h2>
      <p>Semantic elements describe meaning, not just appearance.</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 Webnest Studio</p>
  </footer>
</body>

Renders a page with a header/navigation bar, a main article section with a heading and paragraph, and a footer — while also exposing header, nav, main, and footer as landmarks to screen readers.

Exercise

Replace each div with the semantic element that matches its role. Do not change the text.

Expected result: the page looks the same, but uses header, nav, main, article and footer.

<div class="header">
  <h1>WebNest Blog</h1>
  <div class="nav">
    <a href="/">Home</a>
    <a href="/posts">Posts</a>
  </div>
</div>

<div class="main">
  <div class="post">
    <h2>Why semantics matter</h2>
    <p>Semantic elements describe their content.</p>
  </div>
</div>

<div class="footer">
  <p>Copyright WebNest Studio</p>
</div>

<header>
  <h1>WebNest Blog</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/posts">Posts</a>
  </nav>
</header>

<main>
  <article>
    <h2>Why semantics matter</h2>
    <p>Semantic elements describe their content.</p>
  </article>
</main>

<footer>
  <p>Copyright WebNest Studio</p>
</footer>

Quick quiz

Interview questions