HTML Layout: How to Plan and Build a Page Layout

An HTML layout is the plan for where the header, navigation, main content, sidebar and footer go on your page. Learn the layout elements, common page layouts and how to build one.

What is an HTML page layout?

A layout is the arrangement of the big parts of a page: where the logo sits, where the menu goes, where the main content and sidebar are, and what is at the bottom. Think of a floor plan for a house. Before you choose furniture and paint, you decide where the kitchen and bedrooms go.

HTML and CSS share the job:

• HTML describes the parts of the layout with semantic elements.
• CSS places those parts on the screen: side by side, stacked, in columns.

You learned the semantic elements in the Semantic HTML lesson. This lesson is about using them to plan and build a whole page.

HTML layout elements

Element	Job in the layout
<header>	Top area: logo, site name, often the navigation
<nav>	Main menu links
<main>	The main content of this page (only one)
<article>	A self-contained item: post, product, comment
<section>	A themed part with its own heading
<aside>	Side content: sidebar, related links, ads
<footer>	Bottom area: copyright, contact, small links
<div>	A plain box, only for grouping or styling

The source order matters. Screen readers, search engines and phones with narrow screens all read the HTML from top to bottom. So write the HTML in a logical reading order first, then let CSS move things around visually.

Common website layouts

Most websites use one of a few patterns. Sketching them on paper (or in text) before you write code saves time.

One-column layout

Great for blogs, articles and phones. Everything is stacked.

+----------------------------+
|          HEADER            |
+----------------------------+
|           NAV              |
+----------------------------+
|                            |
|           MAIN             |
|                            |
+----------------------------+
|          FOOTER            |
+----------------------------+

Two-column layout with a sidebar

Common for blogs, shops and documentation.

+----------------------------+
|       HEADER + NAV         |
+------------------+---------+
|                  |         |
|       MAIN       |  ASIDE  |
|                  |         |
+------------------+---------+
|          FOOTER            |
+----------------------------+

Holy grail layout (three columns)

A classic: navigation on the left, content in the middle, sidebar on the right.

+----------------------------+
|          HEADER            |
+------+--------------+------+
|      |              |      |
| NAV  |     MAIN     | ASIDE|
|      |              |      |
+------+--------------+------+
|          FOOTER            |
+----------------------------+

Card grid layout

Used for product lists, portfolios and news.

+----------------------------+
|       HEADER + NAV         |
+--------+--------+----------+
| CARD   | CARD   | CARD     |
+--------+--------+----------+
| CARD   | CARD   | CARD     |
+--------+--------+----------+
|          FOOTER            |
+----------------------------+

Tip: Plan for phones first. On a narrow screen, almost every layout becomes one column. Design that version first, then add columns for wider screens. This is called mobile-first design.

Layout techniques: how CSS places the parts

There are several ways to turn these sketches into real layouts.

• CSS Flexbox: arranges items in one direction, a row or a column. Perfect for navigation bars, button groups and cards that wrap.
• CSS Grid: arranges items in rows and columns at the same time. Perfect for whole-page layouts and card grids.
• CSS frameworks: ready-made CSS libraries like Bootstrap or Tailwind CSS. They give you layout classes so you write less CSS, but you should understand Flexbox and Grid first.
• Old techniques to avoid: using <table> for layout, or float for columns. These were common before 2015, but they are fragile and bad for accessibility. Tables are for data only.

You will learn Flexbox and Grid properly in the CSS course. For now, a few lines are enough to see a layout come to life.

A complete page layout skeleton

Here is a full two-column layout. The HTML is in reading order; a small amount of CSS Grid places the parts.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Trail Notes - Hiking Blog</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.5;
    }
    .page {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      max-width: 1000px;
      margin: 0 auto;
      padding: 16px;
    }
    header, nav, main, aside, footer {
      padding: 16px;
      border-radius: 8px;
    }
    header { background-color: #2e6b3f; color: white; }
    nav { background-color: #dcefe2; }
    nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
    main { background-color: #ffffff; border: 1px solid #dddddd; }
    aside { background-color: #f4f4f4; }
    footer { background-color: #333333; color: white; text-align: center; }

    @media (min-width: 768px) {
      .page {
        grid-template-columns: 3fr 1fr;
      }
      header, nav, footer {
        grid-column: 1 / -1;
      }
    }
  </style>
</head>
<body>
  <div class="page">
    <header>
      <h1>Trail Notes</h1>
      <p>Stories and tips from weekend hikes.</p>
    </header>

    <nav aria-label="Main">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="trails.html">Trails</a></li>
        <li><a href="gear.html">Gear</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
    </nav>

    <main>
      <article>
        <h2>Five easy hikes for beginners</h2>
        <p>Published on <time datetime="2026-09-20">20 September 2026</time></p>
        <p>You don't need expensive boots to start hiking. These five short trails are flat, well marked and close to public transport.</p>
      </article>
    </main>

    <aside>
      <h2>Popular posts</h2>
      <ul>
        <li><a href="packing.html">What to pack for a day hike</a></li>
        <li><a href="weather.html">Reading mountain weather</a></li>
      </ul>
    </aside>

    <footer>
      <p>&copy; 2026 Trail Notes</p>
    </footer>
  </div>
</body>
</html>

On a phone, everything is stacked in one column: header, menu, article, popular posts, footer. Make the window wider than 768 pixels and the layout changes: the article takes three quarters of the width and the "Popular posts" sidebar sits on the right, while the header, menu and footer stretch across the full width. The display: flex on the menu list puts the links in a row.

Common mistake: Changing the HTML order to get a visual result, like putting <aside> before <main> so it appears on the left. Keep the HTML in reading order and use CSS to move things. Screen reader and keyboard users follow the HTML order.

Practice exercise

Sketch a holy grail layout with boxes made of text characters (or on paper) for a recipe website: header, left navigation with recipe categories, main recipe, right sidebar with "Similar recipes", footer. Then build the HTML using semantic elements in reading order, and copy the CSS from the example, changing grid-template-columns to 1fr 3fr 1fr for wide screens.

Hint: with three columns, the <nav> should stay in its own column, so remove nav from the grid-column: 1 / -1 rule.

Key takeaways

• A layout is the plan for where the big parts of a page go.
• Use semantic elements like <header>, <nav>, <main>, <aside> and <footer> to describe the layout.
• Common layouts are one column, two columns with a sidebar, holy grail and card grids.
• CSS Flexbox, CSS Grid and frameworks place the parts; never use tables for layout.
• Write HTML in reading order and plan for phones first.