Elizabeth Mosley

Semantic HTML uses elements that describe their meaning to both browsers and developers. While <div> and <span> still have their place, semantic elements improve accessibility, SEO, and code maintainability.

The Problem with Generic Elements

This approach works but provides no context:

<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
  </div>
</div>
<div class="main">
  <div class="article">Content here</div>
</div>
<div class="footer">Footer content</div>

Semantic Alternatives

Descriptive elements communicate structure:

<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>Article Title</h1>
    <p>Content here</p>
  </article>
</main>
<footer>
  <p>Footer content</p>
</footer>

Key Semantic Elements

Structural:

• <header>: Introductory content
• <nav>: Navigation links
• <main>: Primary content
• <article>: Self-contained content
• <section>: Thematic grouping
• <aside>: Tangentially related content
• <footer>: Footer information

Text-level:

• <strong>: Important text (vs. <b> for styling)
• <em>: Emphasized text (vs. <i> for styling)
• <mark>: Highlighted text
• <time>: Dates and times
• <address>: Contact information

Accessibility Benefits

Screen readers use semantic elements to:

• Navigate between sections
• Skip to main content
• Understand page structure
• Provide context to users

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

SEO Advantages

Search engines better understand your content hierarchy and importance. Using <article>, <h1>-<h6>, and <time> helps search engines index your content accurately.

When to Use Div

<div> remains appropriate for:

• Pure styling containers
• Layout wrappers
• Elements with no semantic meaning

<div class="container">
  <article>
    <!-- Semantic content -->
  </article>
</div>

Common Mistakes

1. Multiple <main> elements (only one per page)
2. Nesting <article> inside <address>
3. Using semantic elements for styling only
4. Forgetting heading hierarchy (h1 → h2 → h3)

Semantic HTML costs nothing to implement but delivers significant benefits for users, developers, and search engines.

• Back to Home