Reference Layout Used in This Section
Several notes below build on this same page skeleton — a typical blog post layout using semantic elements instead of generic divs:
<body>
<header>
<h1>CodingNow Blog</h1>
<nav>
<a href="/">Home</a>
<a href="/blog">Blog</a>
</nav>
</header>
<main>
<article>
<h2>5 Tips for Learning Python</h2>
<p>Start with the basics before jumping into frameworks...</p>
</article>
<aside>
<h3>Related Posts</h3>
<ul>
<li><a href="#">SQL for Beginners</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 CodingNow</p>
</footer>
</body>What "Semantic" Means
A semantic element's name describes its meaning, not its appearance. <article> tells the browser, screen readers, and search engines "this is a self-contained piece of content" — a <div> tells them nothing at all.
Non-Semantic vs Semantic — Same Result, Different Meaning
<!-- Non-semantic: works visually, means nothing structurally -->
<div class="header">
<div class="nav">...</div>
</div>
<!-- Semantic: same visual result, real meaning -->
<header>
<nav>...</nav>
</header>Both can look identical with the right CSS. The difference is entirely about what a machine — a screen reader, a search engine, a browser's reader mode — can understand about the content without any styling at all.
The Core HTML5 Semantic Elements
| Element | Represents |
|---|---|
| <header> | Introductory content or navigation for a page or section |
| <nav> | A block of major navigation links |
| <main> | The primary content of the page — one per page |
| <section> | A thematic grouping of content, usually with its own heading |
| <article> | Self-contained content that could stand alone (a blog post, a comment) |
| <aside> | Content tangentially related to the main content (sidebar, pull-quote) |
| <footer> | Closing content for a page or section — copyright, contact info |
Why Semantic HTML Matters
- Accessibility — screen readers use these elements as "landmarks," letting users jump directly to navigation, main content, or footer instead of reading everything top to bottom
- SEO — search engines use structural signals like
<article>and heading hierarchy to better understand what a page is actually about (see Semantic SEO) — this is a genuine signal among many, not a ranking guarantee - Maintainability — a developer reading
<nav>instantly knows its purpose; a<div class="nav-wrapper-2">requires guessing or digging through CSS - Free browser features — reader modes, table-of-contents extensions, and browser "find in page" behavior work better with real structure
Common Mistakes
- Using
<div>everywhere out of habit, even where a semantic element fits perfectly - Using semantic elements purely for their default CSS-like behavior rather than their actual meaning (e.g. using
<section>just as a generic wrapper with no real heading or theme) - Nesting multiple
<main>elements on one page — there should only ever be one
Interview Relevance
"Why use semantic HTML instead of divs?" is asked in nearly every frontend interview. Structure your answer around the four points above — accessibility, SEO, maintainability, and built-in browser features — rather than just "it's best practice."
Practice Question
Take a page built entirely from <div> elements with classes like header, nav, main-content, and footer, and rewrite it using real semantic elements.
