Semantic HTML

Semantic HTML uses elements that convey meaning about the content they contain, improving accessibility, SEO, and code maintainability.

The Old Way

<div class="header">
  <div class="logo">Site Name</div>
  <div class="navigation">
    <div class="nav-item"><a href="/">Home</a></div>
    <div class="nav-item"><a href="/about">About</a></div>
  </div>
</div>

<div class="main-content">
  <div class="article">
    <div class="article-header">
      <div class="title">Article Title</div>
      <div class="date">January 1, 2025</div>
    </div>
    <div class="article-body">
      <p>Article content...</p>
    </div>
  </div>

  <div class="sidebar">
    <div class="widget">Related Links</div>
  </div>
</div>

<div class="footer">
  <div class="copyright">© 2025</div>
</div>

Problems:

• Screen readers cannot identify page regions
• Search engines cannot determine content hierarchy
• Class names are the only indication of purpose
• Requires ARIA roles to be accessible

The Modern Way

<header>
  <h1>Site Name</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2025-01-01">January 1, 2025</time>
    </header>
    <p>Article content...</p>
  </article>

  <aside>
    <h3>Related Links</h3>
  </aside>
</main>

<footer>
  <p>© 2025</p>
</footer>

Benefits:

• Screen readers announce page regions automatically
• Search engines understand content structure
• Self-documenting code
• Built-in landmark roles

Semantic Elements Reference

Element	Purpose	Implicit ARIA Role
<header>	Introductory content, navigation	banner (when top-level)
<nav>	Navigation links	navigation
<main>	Main content of the page	main
<article>	Self-contained content	article
<section>	Thematic grouping with heading	region (when labeled)
<aside>	Tangentially related content	complementary
<footer>	Footer for nearest sectioning content	contentinfo (when top-level)
<figure>	Self-contained media with caption	figure
<figcaption>	Caption for a figure	None
<time>	Machine-readable date/time	None
<address>	Contact information	None
<mark>	Highlighted/referenced text	None

Browser Support

Supported in all modern browsers including IE9+.

Accessibility Considerations

• Screen readers use semantic elements to create a page outline
• Users can jump between landmarks using keyboard shortcuts
• <main> should only appear once per page
• Nest headings properly (h1 → h2 → h3)
• Use <section> with a heading; otherwise use <div>

When to Use

Use semantic elements when:

• The element matches the content’s purpose
• You want automatic accessibility benefits
• Building page structure and landmarks

Use <div> when:

• Grouping for styling purposes only
• No semantic meaning applies
• Creating layout containers