Semantic HTML isn't just about accessibility — it affects SEO, maintainability, and even performance. At Google, we consider it a fundamental skill.
Semantic vs Non-Semantic
<!-- Non-semantic (div soup) -->
<div class="header">
<div class="nav">
<div class="nav-item">Home</div>
</div>
</div>
<div class="main">
<div class="article">
<div class="title">Hello</div>
</div>
</div>
<!-- Semantic -->
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>
<main>
<article>
<h1>Hello</h1>
</article>
</main>Essential Semantic Elements
| Element | Purpose | Common Mistake |
|---|---|---|
| <header> | Introductory content | Using only for page header (can be in article too) |
| <nav> | Navigation links | Wrapping every link group (only major nav) |
| <main> | Primary content (one per page) | Multiple <main> elements |
| <article> | Self-contained content | Using for non-independent content |
| <section> | Thematic grouping | Using instead of <div> for styling |
| <aside> | Related but tangential content | Using only for sidebars |
| <figure> | Self-contained illustration | Not using <figcaption> |
| <time> | Date/time | Not using datetime attribute |
Form Semantics
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name</label>
<input id="name" type="text" required autocomplete="name" />
<label for="email">Email</label>
<input id="email" type="email" required autocomplete="email" />
</fieldset>
<button type="submit">Submit</button>
</form>SEO Benefits
- Search engines understand content structure better
- <article> content can appear in Google Discover
- <nav> helps crawlers identify navigation patterns
- Proper heading hierarchy (h1→h6) improves content indexing
- <time datetime="..."> enables rich snippets
The Heading Hierarchy Rule
Every page should have exactly one <h1>. Headings should not skip levels (h1 → h3 without h2). Each section can restart at h1 using <article> or <section>, but in practice, keep a single h1 per page for SEO.