Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on.You've got this!
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'>.
Semantic elements improve SEO, accessibility, and code readability
Pro Tip
Use the browser DevTools 'Accessibility' tab to see the computed accessibility tree. Semantic elements like <nav>, <main>, and <article> automatically appear as landmarks - making your page navigable via screen reader shortcuts. Non-semantic <div> elements are invisible in this tree.
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>Warning
Don't replace every <div> with a semantic element blindly. Semantic elements should only be used when they accurately describe the content's role. A wrapper used purely for CSS Grid layout should remain a <div> - wrapping it in <section> without a heading is worse than a <div> because it creates a meaningless entry in the document outline.
Try It Yourself: Semantic Page Layout
Practice Task: Build a Semantic Blog Layout
- Create a blog page with a <header> containing the site title and <nav> with 3 links (Home, Blog, Contact)
- Add a <main> element containing two <article> elements, each with an <h2> title, a <time> element for the date, and a <p> for content
- Add an <aside> with a list of 3 related categories
- Add a <footer> with copyright text - make sure to use semantic elements instead of generic <div> wrappers
- Bonus: Add a <details>/<summary> FAQ section inside the <aside> with 2 questions
Quick Quiz: Semantic HTML
Key Takeaways
- Semantic HTML means using elements that describe the meaning of content, not just its appearance.
- <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