HTML Layout

HTML Layout: Semantic Landmarks and Modern Page Structure

An HTML layout divides a web page into clear functional zones—such as a top navigation bar, main article area, optional sidebar, and bottom footer. Using semantic HTML5 landmark tags instead of anonymous div wrappers gives screen readers and search engines an instant map of your page.

flowchart TD
    Body["body"] --> Header["header + nav (Top Bar)"]
    Body --> Main["main (Primary Content)"]
    Body --> Aside["aside (Related Links)"]
    Body --> Footer["footer (Copyright & Links)"]
    Main --> Article["article / section"]

Core HTML5 Layout Landmarks

• header: Holds the site logo, top banner, or article introduction.
• nav: Wraps major navigation menus and breadcrumbs.
• main: Contains the unique central content of the page (use only one visible main per document).
• article: Represents self-contained content such as a blog post, tutorial lesson, or product card.
• section: Groups related thematic content, ideally with its own heading.
• aside: Holds complementary content like a table of contents or related links.
• footer: Stores copyright notices, legal links, and author info.

Semantic Layout with CSS Grid

Pair semantic HTML landmarks with CSS Grid or Flexbox to position columns cleanly:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML Layout</title>
    <style>
        body { margin: 0; font-family: system-ui, sans-serif; }
        .layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; padding: 20px; }
        header, footer { background: #1e293b; color: #f8fafc; padding: 16px 20px; }
        main, aside { background: #f8fafc; padding: 16px; border: 1px solid #e2e8f0; }
        @media (max-width: 768px) { .layout { grid-template-columns: 1fr; } }
    </style>
</head>
<body>
    <header>
        <nav aria-label="Primary"><a href="/" style="color: #38bdf8;">Home</a></nav>
    </header>
    <div class="layout">
        <main>
            <article>
                <h1>Semantic Page Structure</h1>
                <p>CSS Grid handles multi-column layout while landmarks give clear meaning.</p>
            </article>
        </main>
        <aside>
            <h2>Related Topics</h2>
            <p>CSS Flexbox and CSS Grid tutorials.</p>
        </aside>
    </div>
    <footer><p>&copy; 2026 KoderSolution</p></footer>
</body>
</html>

Common Mistakes to Avoid

• Nesting main inside article or header: Keep main as a top-level landmark directly inside body (or a layout wrapper div).
• Building layouts with HTML tables or CSS floats: Modern sites use CSS Grid for two-dimensional page shells and Flexbox for navigation rows.
• Wrapping every small container in section without headings: Use div when a wrapper exists purely for CSS styling.

Frequently Asked Questions

Can a page have multiple header or footer elements?

Yes. In addition to the main page header and footer, individual article or section blocks can contain their own header and footer.

Why is main important for accessibility?

Screen reader users and keyboard visitors can jump straight past repeated navigation links directly into main.