Semantic Layout Elements
HTML5 introduced elements that describe the purpose of page regions — not just containers like <div>.
<body>
<header>
<!-- Site logo, top navigation -->
</header>
<nav>
<!-- Main navigation links -->
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<main>
<!-- Primary page content -->
<section>
<!-- Thematic grouping of content -->
</section>
<article>
<!-- Self-contained content: blog post, news item -->
</article>
<aside>
<!-- Sidebar: related links, ads, author bio -->
</aside>
</main>
<footer>
<!-- Copyright, links, contact info -->
</footer>
</body>What Each Element Means
| Element | Purpose |
|---|---|
<header> | Page or section header (logo, nav, headline) |
<nav> | Primary navigation links |
<main> | The unique main content (only one per page) |
<section> | Thematic grouping — each should have a heading |
<article> | Self-contained: blog post, news, product card |
<aside> | Secondary content: sidebar, callout, related links |
<footer> | Page or section footer |
Semantic elements are free accessibility and SEO wins. Screen readers use
<nav>, <main>, and <header> as landmarks users navigate between — no extra ARIA needed.