Semantic Layout
Overview
Before HTML5, websites were built using 'Div Soup'—hundreds of generic <div> tags nested inside each other. It was visually functional but structurally meaningless. HTML5 introduced Semantic Layout elements (<header>, <nav>, <main>, <aside>, <footer>). These tags behave exactly like a <div>, but they provide a rich, machine-readable map of your website. Search engines use them to figure out where your primary content is, and screen readers use them to allow users to skip massive navigation menus and jump straight to the <main> content.
Syntax
<body>
<!-- Site-wide header (Logo, primary navigation) -->
<header>
<img src="logo.png" alt="Company Logo">
<nav>...</nav>
</header>
<!-- The core, unique content of the page -->
<main>
<h1>Welcome to our App</h1>
<p>This is where the actual value of the page lives.</p>
</main>
<!-- Secondary content (Sidebars, ads, related links) -->
<aside>
<h2>Recommended Posts</h2>
<ul>...</ul>
</aside>
<!-- Site-wide footer (Copyright, legal links) -->
<footer>
<p>© 2026 TechCorp Inc.</p>
</footer>
</body>Common Pitfalls
- Using multiple
<main>tags on a single page. The<main>element must be strictly unique per document. It represents the central topic of the page. - Assuming
<header>and<footer>can only be used once per page. You can absolutely use them inside specific<article>or<section>blocks to define the header and footer of that specific block.
Interview Questions
It refers to the practice of building entire website layouts using only generic <div> elements, abandoning all semantic meaning, which deeply harms accessibility and SEO.
Real-World Example
A professional, highly accessible dashboard layout architecture.
<body>
<!-- Top navigation bar -->
<header class="top-nav">...</header>
<div class="layout-wrapper">
<!-- Left sidebar containing secondary tools -->
<aside class="sidebar">...</aside>
<!-- The actual application area -->
<main class="content-area">
<section class="chart-container">...</section>
<section class="data-table">...</section>
</main>
</div>
</body>Check Your Knowledge
Test your understanding of Semantic Layout with these quick questions.