# Semantic HTML — Web Accessibility (A11y)

Source: https://www.geekswithgeeks.com/en/accessibility/a11y-semantic-html

> Use HTML elements that describe their meaning, not just appearance.

## Semantic vs non-semantic

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

```html
<!-- ✓ 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.

```html
<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>
```