HTML Snippet
HTML Semantic Layout
Stop using <div> for everything. Semantic elements improve accessibility, SEO, and code readability.
Last updated: October 2026
Quick answer: Use <header> for page or section headers, <nav> for navigation, <main> for primary content (only one per page), <section> for thematic groups, <article> for self-contained content, <aside> for tangential content, and <footer> for page or section footers.
🎬 Layout Map
A typical page structure using semantic HTML elements. This is how search engines and screen readers see your page.
Each colored block represents a semantic element. The hierarchy matters — <article> contains <section> elements, and the whole page is wrapped in <body>.
Why Semantic HTML Matters
Compare these two structures:
<!-- ❌ Div soup — no meaning -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>
<!-- ✅ Semantic — meaning conveyed -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>What you gain:
- Accessibility: Screen readers announce landmarks and skip directly to
<main>content. - SEO: Google can identify the primary content, navigation, and headings — improving rank accuracy.
- Readability: Any developer reading the code immediately understands the structure.
- Maintainability: You can target
header navvsfooter navwithout inventing class names.
The Full Semantic Template
<body>
<header>
<h1>Site Name</h1>
<p>Site tagline</p>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<main>
<article>
<header>
<h2>Blog Post Title</h2>
<p>Published on <time datetime="2026-10-10">Oct 10, 2026</time></p>
</header>
<section>
<h3>Introduction</h3>
<p>Opening paragraph...</p>
</section>
<section>
<h3>Main Points</h3>
<p>Body content...</p>
</section>
<footer>
<p>Author: Jane Doe</p>
</footer>
</article>
</main>
<aside>
<h3>Related Posts</h3>
<ul>
<li><a href="/post-1">Post 1</a></li>
<li><a href="/post-2">Post 2</a></li>
</ul>
</aside>
<footer>
<p>© 2026 Site Name. All rights reserved.</p>
</footer>
</body>This is a complete, semantic HTML5 document. Every element has a specific meaning.
<article> vs <section> — The Key Distinction
This is the element pair developers get wrong most often. The test is simple:
| Question | <article> | <section> |
|---|---|---|
| Could it be syndicated on its own? | Yes | No |
| Does it have its own heading? | Usually yes | Yes (recommended) |
| Examples | Blog post, forum thread, product review | Introduction, Features, FAQ |
| Can contain the other? | Yes — articles can have sections | Yes — sections can have articles |
💡 Rule of thumb: If you'd subscribe to it via RSS, it's an <article>. If it's just a chunk of a larger piece, it's a <section>.
Rules You Must Follow
- One
<main>per page. Not two. Not zero. Exactly one. <main>cannot be nested inside<header>,<footer>,<article>, or<aside>.<header>and<footer>are not page-only. An<article>can have its own<header>and<footer>.<nav>is for navigation, not every list of links. Use it for the primary navigation, breadcrumbs, and table-of-contents. Not for a list of social icons.<section>needs a heading. A section without a heading is probably a<div>.<aside>is for tangentially related content. Sidebars, pull quotes, and related-post lists qualify. The main navigation does not.
CSS for Semantic Elements
Semantic elements are block-level by default. You can style them just like <div>:
/* Modern CSS Grid for the whole page layout */
body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 1fr;
min-height: 100vh;
gap: 0;
}
header { padding: 1rem 2rem; border-bottom: 1px solid #334155; }
nav ul {
display: flex;
gap: 1.5rem;
list-style: none;
padding: 0.75rem 2rem;
}
main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
article { max-width: 65ch; }
aside {
background: #1e293b;
padding: 1.5rem;
border-radius: 12px;
height: fit-content;
}
footer { padding: 1.5rem 2rem; border-top: 1px solid #334155; }
@media (max-width: 768px) {
main { grid-template-columns: 1fr; }
}No class names required. The semantic elements themselves are the selectors. This is cleaner than class-based layouts.
🎯 Semantic Element Cheatsheet
| Element | Purpose | Count per page |
|---|---|---|
<header> |
Introductory content, logo, tagline | 1+ (nested allowed) |
<nav> |
Primary navigation links | 1+ (nested allowed) |
<main> |
The page's primary content | Exactly 1 |
<article> |
Self-contained content | Any number |
<section> |
Thematic group with a heading | Any number |
<aside> |
Tangentially related content | Any number |
<footer> |
Closing content, copyright | 1+ (nested allowed) |
⚠️ Common Mistakes
- Using
<section>without a heading. A section without a heading is just a<div>. Either add a heading or use<div>. - Multiple
<main>elements. There can only be one. If you need multiple content areas, use sections within one main. - Wrapping every link list in
<nav>.<nav>is for major navigation. Social icons in a footer are not nav. - Confusing
<article>and<section>. Ask: would this make sense as a standalone piece? If yes, article. If no, section. - Forgetting
<header>and<footer>inside articles. Blog posts benefit from their own headers and footers with author and date. - Nesting
<main>inside<article>.<main>is the page's primary content. An article is part of that content, not a wrapper for it. - Using semantic elements only for styling. If you use
<header>only because you want a class-free selector, you're missing the point. Semantic HTML is about meaning.
❓ Frequently Asked Questions
What is semantic HTML?
Semantic HTML uses elements that describe their meaning to browsers, developers, and assistive technologies. Instead of <div> for everything, you use <header>, <nav>, <main>, <article>, <aside>, and <footer>. This improves accessibility, SEO, and code readability.
What is the difference between <section> and <article>?
<article> is for content that makes sense on its own — a blog post, a forum thread, a product review. <section> is for thematic groups within a document. If you could syndicate it as standalone content, use <article>. Otherwise, use <section>.
How many <main> elements can a page have?
Exactly one. The <main> element represents the primary content of the page and should only appear once. It must not be nested inside <header>, <footer>, <article>, or <aside>.
Do semantic elements affect SEO?
Yes, indirectly. Semantic HTML helps search engines understand your content structure. Pages using semantic markup often rank better because Google can identify the main content, navigation, and headings more accurately. It also improves accessibility, which Google considers a quality signal.
Can I style semantic elements with CSS?
Yes. Semantic elements are block-level by default and can be styled just like <div>. Most browsers apply minimal default styles. You can override them with CSS to achieve any layout you need.