HTML Page Layout

Plan and build a complete web page layout with header, nav, main, article, aside and footer, then arrange it with simple, responsive CSS.

Lesson 27 of 44Intermediate15 min read

Almost every website you visit has the same basic shape: a header with a logo and navigation at the top, the main content in the middle, perhaps a sidebar to one side, and a footer at the bottom with links and contact details. Learning to build that shape is the moment HTML starts to feel like making real websites.

HTML gives each of these areas its own landmark element: <header>, <nav>, <main>, <aside> and <footer>, with <article> and <section> for content inside them. These elements describe the structure; CSS then decides the arrangement, such as whether the sidebar sits beside the content on a laptop or below it on a phone.

In this lesson you'll plan a layout, write its HTML, and arrange it with a few lines of modern CSS that adapt to any screen. You already met these elements in the semantic elements lesson; here you'll put them together into complete page templates.

Planning the structure

Before writing code, sketch the page as boxes:

Text
+-------------------------------+
| header: logo + nav            |
+---------------------+---------+
| main                | aside   |
|   article           | sidebar |
+---------------------+---------+
| footer                        |
+-------------------------------+
  • <header>: site logo, title and usually the main <nav>.
  • <nav>: major navigation links.
  • <main>: the unique content of this page. Use exactly one per page.
  • <aside>: related but separate content, such as a sidebar, author box or adverts.
  • <footer>: copyright, contact links, secondary navigation.

Arranging it with CSS

Two modern CSS tools do almost all page layout:

  • Flexbox lines items up in a row or column, ideal for a header with a logo on one side and links on the other.
  • Grid creates rows and columns, ideal for the overall page with content and a sidebar.
CSS
.page { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 800px) {
  .page { grid-template-columns: 3fr 1fr; }
}

This is mobile first: one column by default, two columns once the screen is wide enough. The Flexbox and Grid lessons cover these tools in depth.

Common layout patterns

PatternUsed for
Single columnArticles, blog posts, landing pages, mobile views
Content plus sidebarBlogs, documentation, news sites
Holy grail (nav, content, sidebar)Dashboards, older portal sites
Card gridProduct listings, galleries, search results
Sticky headerLong pages where navigation should stay reachable

Limit line length for reading: around 60 to 80 characters per line, using max-width on the content, makes long text much easier to read.

HTML Layout Syntax

Layout skeleton

<body>
  <header>
    <a href="/">Logo</a>
    <nav><a href="/">Home</a> <a href="/blog">Blog</a></nav>
  </header>
  <main>
    <article>...</article>
  </main>
  <aside>...</aside>
  <footer>&copy; 2026 My Site</footer>
</body>

HTML Layout Summary

  • Pages are built from landmark areas: header, nav, main, aside and footer.
  • Use exactly one <main> per page for its unique content.
  • HTML describes structure; CSS Grid and Flexbox arrange it.
  • Build mobile first: one column, then add columns with a media query.
  • Keep HTML in logical reading order and limit text line length.

HTML Layout Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A blog page layout

<style>
  body { margin: 0; font-family: sans-serif; }
  header, footer { background: #1f2937; color: white; padding: 12px 16px; }
  header { display: flex; justify-content: space-between; align-items: center; }
  header a { color: white; margin-left: 12px; text-decoration: none; }
  .page { display: grid; gap: 16px; padding: 16px; max-width: 900px; margin: auto; }
  @media (min-width: 600px) { .page { grid-template-columns: 3fr 1fr; } }
  aside { background: #f3f4f6; padding: 12px; border-radius: 8px; }
</style>
<header>
  <strong>Codevra Blog</strong>
  <nav><a href="#">Home</a><a href="#">Articles</a><a href="#">About</a></nav>
</header>
<div class="page">
  <main>
    <article>
      <h1>Five tips for cleaner HTML</h1>
      <p>Clean HTML is easier to style, easier to maintain and easier for everyone to use.</p>
    </article>
  </main>
  <aside>
    <h2>Popular posts</h2>
    <p>Building your first form</p>
  </aside>
</div>
<footer>&copy; 2026 Codevra Blog</footer>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 3Flexbox puts the site name and links at opposite ends of the header.
  2. Line 5The page area is a grid, centred with a maximum width.
  3. Line 6From 600px wide, the content and sidebar sit side by side, three to one.
  4. Lines 13 to 20The landmarks in reading order: header, main content, sidebar, footer.
Example 2

A sticky header and card grid

<style>
  body { margin: 0; font-family: sans-serif; }
  header { position: sticky; top: 0; background: white; border-bottom: 1px solid #ddd; padding: 12px 16px; }
  main { padding: 16px; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .grid article { border: 1px solid #ddd; border-radius: 8px; padding: 12px; }
</style>
<header><strong>Shop</strong></header>
<main>
  <h1>Kitchen</h1>
  <section class="grid" aria-label="Products">
    <article><h2>Mug</h2><p>£8.50</p></article>
    <article><h2>Kettle</h2><p>£29.99</p></article>
    <article><h2>Teapot</h2><p>£18.00</p></article>
    <article><h2>Bowl</h2><p>£6.00</p></article>
  </section>
</main>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 3position: sticky keeps the header visible when scrolling.
  2. Line 5auto-fill with minmax fits as many 140px-wide cards per row as the screen allows, with no media query.
  3. Lines 10 to 15Each product is an <article> inside a labelled section.
Example 3

A dashboard layout with grid areas

<style>
  .app { display: grid; min-height: 260px; gap: 8px; font-family: sans-serif;
         grid-template-areas: "head" "main" "side" "foot"; }
  @media (min-width: 640px) {
    .app { grid-template-columns: 160px 1fr; grid-template-areas: "head head" "side main" "foot foot"; }
  }
  .app > * { padding: 10px; border-radius: 6px; background: #eef2ff; }
  header { grid-area: head; } nav { grid-area: side; } main { grid-area: main; } footer { grid-area: foot; }
</style>
<div class="app">
  <header>Dashboard</header>
  <nav>Overview<br>Orders<br>Customers</nav>
  <main>Sales today: 42 orders</main>
  <footer>Signed in as Ada</footer>
</div>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 2 to 3On small screens, the named areas stack in one column.
  2. Lines 4 to 6On wider screens, the navigation becomes a left sidebar.
  3. Line 8Each element is placed into its named area, whatever its order in the HTML.

Common HTML Layout Mistakes

Divs for everything

Don't
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
Do
<header>...</header>
<nav>...</nav>
<main>...</main>

Landmark elements let screen-reader users jump straight to each area.

Two main elements

Don't
<main>Article</main>
<main>Comments</main>
Do
<main>
  <article>Article</article>
  <section>Comments</section>
</main>

Fixed pixel widths for the whole page

Don't
<style> .page { width: 1200px; } </style>
Do
<style> .page { max-width: 1200px; margin: auto; padding: 0 16px; } </style>

A fixed width forces phones to scroll sideways.

HTML Layout in Real Projects

Layouts you know

News sites use content-plus-sidebar layouts, online shops use sticky headers and product card grids, and web apps like email clients use dashboard layouts with a navigation column. Website builders and themes produce exactly these landmark structures underneath their visual editors.

HTML Layout Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Complete the element for the page's unique content.

<>
  <h1>About us</h1>
</>
Multiple choiceeasy

Which element usually holds the site logo and main navigation?

Multiple choicemedium

What is aside used for?

Multiple choicemedium

What does "mobile first" mean for layouts?

Fix the bugmedium

Replace the generic divs with landmark elements: header, nav inside the header, main and footer.

<div class="top">
  <div class="links"><a href="#">Home</a> <a href="#">Shop</a></div>
</div>
<div class="content"><h1>Welcome</h1></div>
<div class="bottom">&copy; 2026 Shop</div>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • header contains nav
  • main contains the h1
  • There is a footer
  • Exactly one main

HTML Layout Quiz

5 questions to check what you learned.

  1. How many main elements should a page have?

    • Any number
    • One
    • Two
    • None

  2. Which CSS tool is best for the overall page grid of rows and columns?

    • float
    • CSS Grid
    • position: absolute
    • tables

  3. What does position: sticky do on a header?

    • Removes it on scroll
    • Makes it fixed width
    • Hides it on mobile
    • Keeps it visible at the top while the page scrolls

  4. Why limit the width of text columns?

    • To save bandwidth
    • Browsers require it
    • Lines of about 60 to 80 characters are easier to read
    • For SEO only

  5. Why write HTML in reading order even if CSS moves things around?

    • It loads faster
    • CSS can't move elements
    • Search engines ignore CSS
    • Keyboard, screen-reader and small-screen users follow the HTML order

HTML Layout Challenge

A two-column page

Build a page with:

  1. A <header> with an <h1>
  2. A <div class="layout"> containing <main> and <aside>
  3. CSS that makes .layout a grid with a gap
  4. A <footer>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • header contains an h1
  • layout contains main and aside
  • layout is a grid
  • There is a footer

Related HTML topics

26Semantic ElementsStructure pages with elements that describe what each part is.23Div, Span & Block/InlineWhy some elements stack and others flow, and the two generic containers.20GridTwo-dimensional layouts with rows, columns, fr units and named areas.
Esc
↑↓ to navigateEnter to open