Syllabus

HTML Layout Techniques: Header, Nav & Footer

Badar KhalilUpdated September 27, 2026 2 min read

HTML Layout Techniques: Header, Nav, Main & Footer

Focus keyword: HTML layout structure — understanding how to correctly structure a page using semantic elements is one of the most in-demand front-end fundamentals.

1. Why Semantic Layout Matters

Before HTML5, developers structured pages entirely with generic <div> tags. Modern HTML uses semantic layout elements that describe the purpose of each region, improving SEO, accessibility, and code readability.

2. The Core Layout Elements

<header> — introductory content, usually a logo, site title, and/or navigation
<nav> — a block of navigation links (main menu, breadcrumbs, table of contents)
<main> — the primary, unique content of the page (only one per page)
<section> — a thematic grouping of content, usually with its own heading
<article> — self-contained, independently distributable content (a blog post, news story)
<aside> — tangentially related content (sidebar, ads, related links)
<footer> — closing content, usually copyright, links, contact info

3. A Typical Page Skeleton

A well-structured page typically nests these elements as: header → nav (inside or after header) → main (containing sections/articles) → aside (optional) → footer.

4. Layout with CSS Grid & Flexbox

Once the semantic skeleton is in place, trending modern CSS techniques like CSS Grid (for 2D page layouts) and Flexbox (for 1D alignment, like nav bars) are used to visually arrange these regions responsively.

5. Accessibility Benefit

Screen reader users can jump directly to <main>, <nav>, or <footer> using landmark navigation — a major web accessibility (WCAG) win over generic divs.

Try it Yourself HTML

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>Welcome</h2>
    <p>This is the main content area of the page.</p>
  </section>
  <article>
    <h2>Latest Blog Post</h2>
    <p>Article content goes here...</p>
  </article>
</main>

<aside>
  <h3>Related Links</h3>
</aside>

<footer>
  <p>&copy; 2026 My Website. All rights reserved.</p>
</footer>

Output

Press Run to execute.

Try it Yourself CSS

body {
  display: grid;
  grid-template-areas:
    "header header"
    "main aside"
    "footer footer";
  grid-template-columns: 3fr 1fr;
  gap: 16px;
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; background: #f0f0f0; padding: 12px; }
footer { grid-area: footer; text-align: center; }

nav ul {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;
}

Output

Press Run to execute.

Exercise: Rebuild a Div-Only Page SemanticallyHTML

The page below uses only div tags. Convert it into a proper semantic layout using header, nav, main, and footer.

Try it Yourself HTML

<div class='top'>Logo | Home About Contact</div>
<div class='content'>Page content here...</div>
<div class='bottom'>Copyright 2026</div>

Output

Press Run to execute.

Show expected output

Markup using header (with nav inside), main, and footer elements replacing the generic divs.

This is a self-check — compare your result with the expected output above.

Quiz: HTML Layout Techniques Quiz Pass 70%

Loading quiz…

Was this page helpful?