Semantic HTML
What is semantic HTML?
Semantic HTML means using tags that describe the meaning of the content, not just its appearance. Instead of wrapping everything in generic
<div> tags, you use elements like <header>, <nav>, <main>, and <footer>.Both of these render the same way visually:
HTML
<!-- Non-semantic -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>
<!-- Semantic -->
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>But the semantic version tells browsers, search engines, and screen readers what each section actually is.
Why it matters
- Accessibility — Screen readers use semantic tags to help visually impaired users navigate. A
<nav>tells them "this is navigation," while a<div>tells them nothing. - SEO — Search engines understand your page better when you use the right tags.
- Maintainability — Your code is easier to read when tags are descriptive.
Key semantic elements
| Element | Purpose |
|---|---|
<header> | Page or section header (logo, nav) |
<nav> | Navigation links |
<main> | Primary content (only one per page) |
<article> | Self-contained content (blog post, comment) |
<section> | Thematic grouping of content |
<aside> | Related but secondary content (sidebar) |
<footer> | Page or section footer |
A real-world example
HTML
<header>
<h1>My Blog</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>How I Learned to Code</h2>
<p>It all started when...</p>
</article>
<aside>
<h3>Popular Posts</h3>
<ul>
<li><a href="/post-1">Post 1</a></li>
<li><a href="/post-2">Post 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 My Blog</p>
</footer>Key takeaway
Use semantic HTML whenever possible. It makes your site more accessible, better for SEO, and easier to maintain. If you find yourself writing
<div class="header">, ask yourself: "Is there a proper HTML tag for this?"