HTML Layout

HTML Layout: Structuring Web Pages with Semantic Landmarks

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.

HTML5 Layout Elements Overview

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:

1. <header>: Introductory banner section containing site branding, titles, or search bars.
2. <nav>: Structural block containing primary site navigation links.
3. <main>: Primary, unique content container of the document (only one <main> allowed per page).
4. <article>: Self-contained, independently redistributable piece of content (blog post, news item, card).
5. <section>: Grouping of related content with a common thematic heading.
6. <aside>: Secondary content tangentially related to main content (sidebars, callouts, ad widgets).
7. <footer>: Closing footer section containing copyright notices, privacy policy links, and contact info.

Standard HTML5 Layout Wireframe Diagram

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)"]

Practical Code Example

<!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>&copy; 2026 KoderSolution. All rights reserved.</p>
    </footer>

</body>
</html>

Best Practices

• Use <main> exactly once per page: <main> must wrap only unique page content and should never wrap repeated header/footer components.
• Prefer semantic tags over generic <div> wrappers: Use <header>, <nav>, <main>, <article>, <aside>, and <footer> to create clear accessibility landmarks for screen readers.
• Combine HTML structure with CSS Flexbox or Grid: Use semantic HTML tags for structure and CSS Flexbox/Grid for visual positioning across desktop and mobile screens.

Self-Check Challenge

Create a semantic HTML layout page containing a <header>, a <nav>, a <main> container with one <article> and one <aside>, and a <footer>!