Semantic vs Non-Semantic HTML

Understand how semantic HTML improves accessibility and SEO, while recognizing that non-semantic elements remain essential for layout and styling.

What it is

Semantic HTML uses tags that clearly describe their meaning to both the browser and the developer. Tags like <article>, <nav>, and <header> convey structure and purpose. Non-semantic HTML uses generic containers like <div> and <span>, which have no inherent meaning but are crucial for grouping content for CSS or JavaScript.

The mental model is this: Semantic tags tell you what the content is (e.g., a navigation menu), while non-semantic tags tell you how it looks or behaves (e.g., a flex container). Related terms include "ARIA roles" (which can add semantics to non-semantic tags) and "document outline."

Why it matters

• Accessibility: Screen readers rely on semantic tags to navigate pages efficiently. A user can jump directly to the <main> content if it exists.
• SEO: Search engines use semantic structure to understand the hierarchy and importance of content, potentially improving rankings.
• Maintainability: Code using <footer> is easier to read than code using <div id="footer">.
• Future-proofing: Browsers and assistive technologies evolve to better support standard semantic elements.

Syntax or steps

Use semantic tags for structural landmarks and content types. Use non-semantic tags only when no semantic element fits the purpose, typically for visual layout wrappers.

1. Identify the primary sections of your page (header, nav, main, footer).
2. Wrap these in their corresponding semantic tags.
3. Inside these sections, use <p>, <h1>-<h6>, <ul>, etc., for content.
4. Add <div> or <span> only when you need a hook for CSS styling or JavaScript logic that doesn't fit a semantic role.

Example

<!DOCTYPE html>
<html lang="en">
<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Post Title</h2>
      <div class="meta-info">
        <time datetime="2023-10-01">Oct 1, 2023</time>
      </div>
      <p>This is the post content.</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2023 My Blog</p>
  </footer>
</body>
</html>

In this example, <header>, <nav>, <main>, <article>, and <footer> define the document structure. The <div class="meta-info"> is non-semantic; it exists solely to group the date for potential styling, as there is no specific semantic tag for a metadata wrapper.

Common mistakes

• Divitis: Using <div> for everything because it's familiar. Fix: Ask yourself, "Is this a section, article, or aside?" before reaching for a div.
• Over-semantics: Using <section> just to create a visual box without a heading. Fix: If it has no heading and isn't a distinct thematic break, consider if it should be an <article> or just a styled <div>.
• Nesting errors: Putting block-level semantic elements inside inline elements like <span>. Fix: Keep structure logical; spans are for text-level semantics.
• Ignoring implicit roles: Assuming <div> is invisible to screen readers. It is, but so is <section> if not labeled properly. Fix: Ensure headings exist within landmark regions.

When to use it

Practice

Guided Exercise: Take a simple HTML snippet with three <div> elements representing a header, a list of links, and a copyright notice. Replace them with <header>, <nav>, and <footer>.

Challenge: Create a product card. Use <article> for the card, <h3> for the title, <p> for description, and <div> for the price badge (since "price badge" isn't a standard semantic concept). Verify that the structure makes sense to a screen reader by reading the code aloud.

Quick check

Question: When should you prefer a <div> over a <section>?
Answer: You should prefer a <div> when the element is used purely for layout or styling purposes and does not represent a thematic grouping of content that would benefit from a heading or landmark role.

Summary

Semantic HTML provides meaningful structure for browsers and assistive technologies, while non-semantic tags offer flexibility for design. The best practice is to start with semantic tags and only introduce generic containers when necessary for presentation.