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
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
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.