Google's crawler cannot "see" your page — it reads the markup. Semantic tags tell it exactly what each part means, and pages that communicate structure clearly get indexed better.
Before and after
<!-- ❌ div soup --> <div class="top"><div class="menu">...</div></div> <div class="content">...</div> <!-- ✅ semantic --> <header><nav>...</nav></header> <main><article>...</article></main>
Concrete benefits
- Featured snippets: Google extracts answers more reliably from well-structured markup
- Accessibility: screen reader users jump directly to
<main>and navigate by landmarks - Maintainability: new developers read the structure instantly
Rules of thumb
- Exactly one
<h1>and one<main>per page <article>= makes sense standalone;<section>= thematic group with a heading- Reach for
<div>only when no semantic tag fits
Learn all tags in the Semantic HTML lesson.
← All Articles