Article

Header and Footer Layout

Lawrence

|Reading time

1. Header and Footer Layout

A classic web page layout consists of three main sections: a header at the top, a content area in the middle, and a footer at the bottom. This layout provides structure and is used on countless websites.

Why Use This Layout?

The header-content-footer pattern is popular because it:

Provides consistent navigation with the header
Keeps important links accessible in the footer
Creates a clear visual hierarchy
Works well for responsive designs

The HTML Structure

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Header-Footer Layout</title>
</head>
<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <!-- Page content goes here -->
  </main>

  <footer>
    <!-- Footer content -->
  </footer>
</body>
</html>

Key Elements

Semantic Header

html

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

The `

` element represents introductory content or a group of navigational aids.

Main Content Area

html

<main>
  <article>
    <h2>Welcome</h2>
    <p>This is the main content of the page.</p>
  </article>
</main>

Use `

` for the primary content. It should be unique to the page.

Semantic Footer

html

<footer>
  <p>&copy; 2024 My Website. All rights reserved.</p>
  <nav>
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
  </nav>
</footer>

The `

` contains footer information like copyright or related links.

Making It Full Height

To make the layout fill the entire viewport:

css

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

The `flex: 1` on main makes it grow to fill available space, pushing the footer to the bottom.

Demo

Try the interactive demo on the right. Edit the code to see changes live!

Tips

Use semantic HTML5 elements for better accessibility
The footer naturally stays at the bottom with flexbox
Consider using CSS Grid for more complex layouts
Always test responsive behavior on mobile devices