Back

Semantic HTML

Semantic HTML uses tags that describe what they contain. Instead of using `<div>` for everything, you use meaningful tags that tell browsers and screen readers what each section is. This improves accessibility, SEO, and makes your code easier to read.

```html
<!-- Non-semantic (bad) -->
<div class="header">
  <div class="nav">...</div>
</div>

<!-- Semantic (good) -->
<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
<main>
  <section>
    <article>...</article>
  </section>
</main>
<footer>...</footer>
```

**Common semantic tags:**
- `header`: top of page or section
- `nav`: navigation links
- `main`: main content
- `section`: grouped content
- `article`: standalone content
- `footer`: bottom of page

Roadmap