Semantic HTML Fundamentals
Semantic HTML means using elements that describe the meaning of content, not just its appearance. <article> says 'this is an independent piece of content', <nav> says 'this is navigation'. This helps search engines, screen readers, and developers understand your page structure without reading every line of code.
Why Semantic HTML Matters
Before HTML5, pages were built with <div> and <span> for everything. A screen reader seeing <div class='nav'> doesn't know it's navigation — but <nav> is immediately understood. Google's search algorithms use semantic elements to understand page structure: <article> gets indexed as standalone content, <aside> is treated as supplementary, <main> identifies the primary content. Semantic HTML also makes your code self-documenting — six months later, <header> is clearer than <div class='top-section'>.
HTML5 Semantic Elements
- <header> — Introductory content or navigation for its parent. Site header, article header, or section header
- <nav> — Major navigation block. Site nav, table of contents, breadcrumbs. Don't use for every link group
- <main> — The dominant content of the page. Only ONE per page. Skip links should point here
- <article> — Self-contained, independently distributable content. Blog post, news article, forum post, product card
- <section> — Thematic grouping of content WITH a heading. Not a generic wrapper — use <div> for styling-only containers
- <aside> — Content tangentially related. Sidebars, pull quotes, advertising, related links
- <footer> — Footer for nearest sectioning parent. Copyright, contact info, sitemap links
- <figure>/<figcaption> — Self-contained illustration with optional caption. Images, code blocks, diagrams
- <details>/<summary> — Disclosure widget (accordion). Native toggle without JavaScript. Accessible by default
- <time> — Machine-readable date/time. datetime attribute for ISO format. Helps search engines understand dates
Semantic vs Non-Semantic HTML
<!-- ❌ Non-semantic (div soup) -->
<div class="header">
<div class="nav">
<div class="nav-item"><a href="/">Home</a></div>
</div>
</div>
<div class="content">
<div class="article">
<div class="title">My Blog Post</div>
<div class="text">Content here...</div>
</div>
<div class="sidebar">Related links</div>
</div>
<div class="footer">© 2025</div>
<!-- ✅ Semantic HTML5 -->
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>
<main>
<article>
<h1>My Blog Post</h1>
<p>Content here...</p>
</article>
<aside>Related links</aside>
</main>
<footer>© 2025</footer>