Semantic HTML

Semantic vs non-semantic

Use meaningful tags so assistive tech understands structure. <button> announces as a button; <div onclick> is just a box.

<!-- ✓ Semantic -->
<header>
  <nav>
    <a href="/">Home</a>
    <button>Menu</button>
  </nav>
</header>
<main>
  <article>
    <h1>Title</h1>
    <p>Content</p>
  </article>
</main>
<footer>© 2024</footer>

<!-- ✗ Non-semantic -->
<div id="header">
  <div id="nav">
    <div onclick="go('/')">Home</div>
    <div onclick="menu()">Menu</div>
  </div>
</div>

Key semantic tags

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer> structure; <button>, <form>, <input>, <label> for interaction; <img alt>, <table>, <ul>, <ol> for content.

Common mistakes

Using divs for everything, nested buttons, styling links as buttons, forgetting fieldsets in forms, using tables for layout.

Practice example

Build a proper semantic structure for a blog post.

<article>
  <header>
    <h1>How to Build Accessible Websites</h1>
    <time datetime="2024-10-01">October 1, 2024</time>
  </header>
  <section>
    <h2>Introduction</h2>
    <p>In this guide...</p>
  </section>
  <section>
    <h2>Best Practices</h2>
    <ol>
      <li>Use semantic HTML</li>
      <li>Test with assistive tech</li>
    </ol>
  </section>
  <footer>
    <p>Posted in <a href="/category/web">Web Development</a></p>
  </footer>
</article>