HTML page layout defines how visual components—headers, navigation menus, main content areas, sidebars, and footers—are organized into structural regions on a screen. Modern web development relies on semantic HTML5 layout elements instead of generic un-semantic containers.
Semantic layout elements describe their structural role directly to browsers, screen readers, and search engine crawlers:
<header>Site Logo & Primary Navigation</header>
<nav>Main Site Links</nav>
<main>
<article>Primary Standalone Story</article>
<aside>Related Sidebar Articles</aside>
</main>
<footer>Copyright & Legal Links</footer>
Key layout elements explained:
<header>: Introductory banner section containing site branding, titles, or search bars.<nav>: Structural block containing primary site navigation links.<main>: Primary, unique content container of the document (only one <main> allowed per page).<article>: Self-contained, independently redistributable piece of content (blog post, news item, card).<section>: Grouping of related content with a common thematic heading.<aside>: Secondary content tangentially related to main content (sidebars, callouts, ad widgets).<footer>: Closing footer section containing copyright notices, privacy policy links, and contact info.flowchart TD
A["header / nav (Header & Main Menu)"] --> B["main (Core Unique Page Content)"]
B --> C["article / section (Primary Content)"]
B --> D["aside (Sidebar / Callouts)"]
B --> E["footer (Site Copyright & Links)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Layout Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; margin: 0; padding: 0;">
<!-- Top Header & Navigation -->
<header style="background-color: #1e293b; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center;">
<h2 style="margin: 0; color: #38bdf8;">KoderSolution</h2>
<nav>
<a href="#" style="color: #f8fafc; margin-right: 1rem; text-decoration: none;">Home</a>
<a href="#" style="color: #f8fafc; text-decoration: none;">Docs</a>
</nav>
</header>
<!-- Main Content Grid Wrapper -->
<main style="padding: 2rem; max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; gap: 2rem;">
<article style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px;">
<h3>Understanding Modern Web Layouts</h3>
<p>Semantic HTML5 elements improve accessibility and search engine indexing over non-semantic div tags.</p>
</article>
<aside style="background-color: #334155; padding: 1.5rem; border-radius: 8px;">
<h4>Sidebar Links</h4>
<p>Related tutorials and resource downloads.</p>
</aside>
</main>
<!-- Site Footer -->
<footer style="background-color: #1e293b; text-align: center; padding: 1.5rem; margin-top: 2rem; color: #94a3b8;">
<p>© 2026 KoderSolution. All rights reserved.</p>
</footer>
</body>
</html>
<main> exactly once per page: <main> must wrap only unique page content and should never wrap repeated header/footer components.<div> wrappers: Use <header>, <nav>, <main>, <article>, <aside>, and <footer> to create clear accessibility landmarks for screen readers.Create a semantic HTML layout page containing a <header>, a <nav>, a <main> container with one <article> and one <aside>, and a <footer>!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.