What is Semantic HTML?
Semantic elements clearly describe their meaning to both the browser and the developer, unlike generic <div> or <span> elements. HTML5 introduced a set of semantic elements to describe common page regions.
A Semantic Page Layout
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Blog Post Title</h2>
<p>Article content...</p>
</article>
<aside>
<h3>Related Links</h3>
</aside>
</main>
<footer>
<p>© 2026 My Website</p>
</footer>Common Semantic Elements
| Element | Purpose |
|---|---|
| <header> | Introductory content or navigation for a page/section |
| <nav> | A block of navigation links |
| <main> | The dominant, unique content of the page (one per page) |
| <article> | Self-contained content that could stand alone, like a blog post |
| <section> | A thematic grouping of content, usually with a heading |
| <aside> | Content tangentially related to the main content, like a sidebar |
| <footer> | Footer content for a page or section |
| <figure> / <figcaption> | An image, diagram, or code block with a caption |
| <time> | A specific date or time value |
section vs article vs div
Use <article> for content that makes sense on its own (a blog post, a product card). Use <section> for a thematic grouping within a page that usually has its own heading. Fall back to <div> only when neither applies and you just need a styling wrapper.
figure and figcaption
<figure>
<img src="chart.png" alt="Quarterly revenue chart" />
<figcaption>Figure 1: Quarterly revenue growth.</figcaption>
</figure>Why Semantic HTML Matters
Semantic markup helps screen readers announce page regions correctly, lets search engines better understand content importance, and makes code easier for other developers to read.
One main Per Page
There should only be one <main> element per page, representing the primary content — excluding repeated elements like headers, footers, and navigation.
Best Practice
Reach for a semantic element before a <div> whenever one accurately describes the content’s role. It costs nothing extra and pays off in accessibility and SEO.