Semantic Landmark Elements
1. Introduction
Semantic HTML means using elements that describe the meaning of content, not just its visual appearance. HTML5 introduced structural landmark elements — <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> — that replace generic <div> containers. Using them correctly improves accessibility, SEO, and code maintainability simultaneously.
2. Concept
Landmark Elements and Their ARIA Roles
| Element | Implicit ARIA Role | Use For |
|---|---|---|
<header> |
banner (top-level only) | Site or section header: logo, nav, search |
<nav> |
navigation | Groups of navigation links |
<main> |
main | Primary unique content — one per page |
<article> |
article | Self-contained, independently distributable content |
<section> |
region (needs aria-label) | Thematic grouping — always needs a heading |
<aside> |
complementary | Tangentially related content, sidebars |
<footer> |
contentinfo (top-level only) | Site or section footer |
<article> and <section> are often confused. Use <article> for content that makes sense standalone (blog post, product card, comment). Use <section> for grouping related content that is part of a larger whole — and every <section> should have a heading inside it.<header> and <footer> elements — one per <article> or <section>. Only top-level ones (direct children of <body>) map to the banner and contentinfo ARIA landmarks.<main> per page. Multiple <main> elements are invalid HTML and confuse screen reader landmark navigation.3. Basic Example
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Semantic Demo</title></head>
<body>
<header>
<h1>Dev Insider</h1>
<nav aria-label="Primary navigation">
<a href="/">Home</a>
<a href="/articles">Articles</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<header>
<h2>Getting Started with CSS Grid</h2>
<time datetime="2025-03-10">March 10, 2025</time>
</header>
<section>
<h3>What Is CSS Grid?</h3>
<p>CSS Grid is a two-dimensional layout system built into modern browsers.</p>
</section>
<section>
<h3>Basic Syntax</h3>
<p>Apply <code>display: grid</code> to a container element.</p>
</section>
<footer>
<p>Written by <strong>Alice Smith</strong></p>
</footer>
</article>
<aside aria-label="Related articles">
<h2>Related</h2>
<ul>
<li><a href="/flexbox">Mastering Flexbox</a></li>
<li><a href="/responsive">Responsive Design</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 Dev Insider</p>
</footer>
</body>
</html>
4. How It Works
Step 1 — header as Banner Landmark
A <header> that is a direct child of <body> maps to the banner ARIA landmark. Screen reader users can jump directly to it with a single keystroke. It wraps the site logo, title, and primary navigation.
Step 2 — main Contains the Page’s Unique Content
Exactly one <main> per page, containing everything unique to this page — not repeated header/nav/footer content. Browser “skip to main content” mechanisms target it automatically.
Step 3 — article for Standalone Content
<article> wraps self-contained content. Its nested <header> and <footer> provide article-specific metadata without affecting page-level landmarks since they are not direct children of <body>.
Step 4 — aside for Complementary Content
<aside> marks content related to but not required for the main content — sidebars, pull quotes, related links. It maps to the complementary ARIA landmark.
5. Real-World Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechStore — ProBook 15</title>
</head>
<body>
<header>
<a href="/" aria-label="TechStore Home">
<img src="/logo.svg" alt="TechStore" width="120" height="40">
</a>
<nav aria-label="Main menu">
<a href="/products">Products</a>
<a href="/deals">Deals</a>
<a href="/cart">Cart</a>
</nav>
</header>
<main>
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/laptops">Laptops</a></li>
<li aria-current="page">ProBook 15</li>
</ol>
</nav>
<article>
<header>
<h1>ProBook 15 Laptop</h1>
<p>SKU: PB15-2025</p>
</header>
<section aria-labelledby="overview-h">
<h2 id="overview-h">Overview</h2>
<p>Professional-grade performance in a slim 1.8 kg chassis.</p>
</section>
<section aria-labelledby="specs-h">
<h2 id="specs-h">Specifications</h2>
<dl>
<dt>Processor</dt><dd>Intel Core i7-13th Gen</dd>
<dt>RAM</dt><dd>16 GB DDR5</dd>
<dt>Storage</dt><dd>512 GB NVMe SSD</dd>
</dl>
</section>
</article>
<aside aria-labelledby="related-h">
<h2 id="related-h">You May Also Like</h2>
<ul>
<li><a href="/probook13">ProBook 13 — £899</a></li>
<li><a href="/ultrabook16">UltraBook 16 — £1,299</a></li>
</ul>
</aside>
</main>
<footer>
<nav aria-label="Footer links">
<a href="/privacy">Privacy Policy</a>
<a href="/contact">Contact Us</a>
</nav>
<p>© 2025 TechStore Ltd.</p>
</footer>
</body>
</html>
6. Common Mistakes
❌ Using <section> as generic wrapper without a heading
<section class="card-grid">
<img src="product.jpg" alt="...">
</section>✓ Use <article> for self-contained items; <div> for styling wrappers
<article class="card">
<h3>Product Name</h3>
<img src="product.jpg" alt="...">
</article>❌ Multiple nav elements with no labels — ambiguous for screen readers
<nav><!-- main --></nav>
<nav><!-- breadcrumb --></nav>✓ Label each nav uniquely with aria-label
<nav aria-label="Primary navigation"></nav>
<nav aria-label="Breadcrumb"></nav>7. Try It Yourself
8. Quick Reference
| Element | ARIA Landmark | Max Per Page |
|---|---|---|
<header> |
banner (top-level) | One top-level; multiple in articles/sections |
<nav> |
navigation | Multiple — label each with aria-label |
<main> |
main | Exactly one |
<article> |
article | Unlimited — self-contained content |
<section> |
region (needs label) | Unlimited — always needs a heading |
<aside> |
complementary | Multiple allowed |
<footer> |
contentinfo (top-level) | One top-level; multiple in articles/sections |