Multi-page Structure

Organise a website with multiple linked pages, shared navigation, and consistent styles.

Why Multi-page Structure Matters

A single page can be built from top to bottom. A multi-page site needs a plan. Each page has its own purpose, but the pages still need to feel like one website. That means shared navigation, shared visual patterns, shared assets, and clear links between pages.

This lesson stays in plain HTML and CSS. You are not creating templates or using a framework. You are learning the structure underneath those tools: how to organise pages, repeat shared patterns carefully, and keep paths understandable.

Start with a Small Site Map

Before creating files, decide what pages the site needs and how people will move between them. For a small business or restaurant site, a simple map is usually enough.

For Black Swan Bistro, the starter multi-page structure might be:

• Home: overview, featured dishes, booking prompt
• Menu: full food and drink sections
• About: story, values, local produce
• Contact: booking information, address, opening hours

Plan the File Structure

For a beginner-friendly static site, keep the main HTML pages beside each other. Put shared CSS and image assets into clear folders.

black-swan-bistro/
  index.html
  menu.html
  about.html
  contact.html
  css/
    style.css
  images/
    dining-room.jpg
    featured-dish.jpg
    bistro-front.jpg

This structure is intentionally simple. Every HTML page can reach the shared CSS file with the same path: css/style.css. Every page can link to the other main pages with direct filenames like menu.html.

Build Shared Navigation

Navigation is the most visible shared structure. Every main page should include the same set of important links so visitors can move around without thinking about where they are.

<header class="site-header">
  <div class="container site-header__inner">
    <a class="site-logo" href="index.html">Black Swan Bistro</a>

    <nav class="site-nav" aria-label="Main navigation">
      <ul class="site-nav__list">
        <li><a class="site-nav__link" href="index.html">Home</a></li>
        <li><a class="site-nav__link" href="menu.html">Menu</a></li>
        <li><a class="site-nav__link" href="about.html">About</a></li>
        <li><a class="site-nav__link" href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

On the current page, you can add a small active state to help orientation:

<a class="site-nav__link is-active" href="menu.html" aria-current="page">
  Menu
</a>

The key idea is consistency. In plain HTML, you will copy this shared navigation into each page. That is not failure. It is controlled repetition until you later learn tools that can generate shared templates.

Keep Shared Styles Global

Your shared stylesheet should contain the patterns that belong to the whole site: colour tokens, type rules, layout helpers, buttons, cards, navigation, and footer styles.

/* Foundations */
:root {
  --color-cream: #f7efe2;
  --color-ink: #1f1b18;
  --color-red: #8f2f23;
}

body {
  margin: 0;
  font-family: Georgia, serif;
  background: var(--color-cream);
  color: var(--color-ink);
}

/* Shared layout */
.container {
  width: min(1100px, 92%);
  margin-inline: auto;
}

.section {
  padding-block: 3rem;
}

/* Shared components */
.site-header,
.site-footer,
.button,
.menu-card {
  /* shared component styles live here */
}

Limit Page-specific Styles

Some styles only belong to one page. That is okay, but keep them clearly labelled and limited. If a style starts appearing on two or three pages, it may need to move into the shared component area.

/* Page: Menu */
.menu-category {
  margin-block: 2rem;
}

.menu-category__title {
  border-bottom: 2px solid var(--color-red);
  padding-bottom: 0.5rem;
}

The page-specific rule here supports a menu page section. It does not change the global header, footer, or button styles. That boundary helps future you understand what each rule is responsible for.

Check Links and Paths

Most multi-page beginner bugs are path bugs. The browser is not being dramatic; it is simply looking in the place you told it to look.

• href="menu.html" links to a file beside the current page.
• href="css/style.css" links to a file inside the css folder.
• src="images/dining-room.jpg" links to an image inside the images folder.
• href="../index.html" means go up one folder, then find index.html.

Multi-page Consistency Checklist

Before moving into a project build, check the structure:

• Every page has the same main navigation links.
• The current page has a clear active navigation state.
• Every page links to the same shared stylesheet.
• Header and footer structure stays consistent.
• Page titles and main headings are unique.
• Image and CSS paths are tested from each page.
• Shared styles are not duplicated in several page-specific places.

Guided Practice

Independent Practice

Recap

Multi-page structure is about consistency and orientation. Each page has its own job, but the site needs shared navigation, shared styles, predictable files, and tested links. If you plan those pieces before adding lots of content, the site feels calmer to build and easier to maintain.

This is the final standalone bridge before Black Swan Bistro Part 4. You now have the concepts needed to expand a one-page bistro site into a small linked website.