Making multiple pages

1. Websites usually have more than one page

Most websites are made from multiple pages that work together to share information, because a single long page quickly becomes hard to navigate. Splitting content into pages helps users find what they need faster, since each page can focus on one topic without distractions.

A multi-page site usually repeats the same layout on every page so it feels consistent, which reduces confusion because users do not have to re-learn where things are. Navigation links are what connect pages into one website rather than separate files, and without them users get stuck on one page.

  1. Open a familiar website in a browser.
  2. Click two different navigation links at the top of the page.
  3. Notice that the URL changes, but the site layout stays similar.

2. A new page is usually a new .html file

In a basic website, each page is typically a separate file ending in .html, which the browser can open and interpret as HTML. This works because the browser treats each file as a separate document with its own content and title, even if the layout is shared.

If you only create index.html, then you only have one page available to navigate to, so every link you add must point somewhere real. If a link points to a file that does not exist, the browser will show an error or a blank load, which makes the website feel broken and unreliable.

  1. Open your website project folder in Visual Studio Code.
  2. Confirm you already have a file named index.html.
  3. Create a new file named tokyo.html in the same folder.

3. File naming matters because links must match exactly

When you link to another page, the link must use the exact file name, including spelling and capitalization, because computers do not guess what you meant. A link to Tokyo.html is different from a link to tokyo.html, so inconsistent naming is a common cause of broken navigation.

Good file names are short, lowercase, and avoid spaces, because they are easier to type and less error-prone, especially when you start adding more pages and folders. Using a clear naming pattern also makes your project easier to maintain later, because you can immediately tell which file represents which page.

  1. Create three more empty files: osaka.html, hiroshima.html, and matsuyama.html.
  2. Check that all five files are in the same folder: index.html plus the four city pages.
  3. Check that every file name is lowercase and has no spaces.

4. Hyperlinks connect pages using the <a> element

A hyperlink is created using an anchor element written as <a>, which tells the browser that text should be clickable instead of plain content. The destination is stored in the href attribute, which is the address the browser loads when clicked, so it must be correct or the link fails.

When you link between pages in the same folder, the href can be just the file name like tokyo.html, because the browser searches relative to the current file. This is called a relative link, and it is useful because the site still works even if the whole folder is moved to another computer, since the relationship between files stays the same.

  1. Open index.html in VS Code.
  2. Add a link that points to tokyo.html using an <a> element.
  3. Save the file and click the link in the browser to confirm it loads.
 
<p>
  <a href="tokyo.html">Tokyo</a>
</p>

5. Each page should identify itself so you can tell where you are

When you create multiple pages, each page needs a clear heading so the user knows which page they are viewing, because the browser window alone does not explain the page content. If pages look too similar and do not label themselves, users get lost and may not trust the navigation, especially if they are moving quickly between pages.

A simple way to do this is to put a city name heading near the top of each page using <h1>, then follow it with one or two short paragraphs. Even placeholder text is useful during development because it proves the link worked and the correct file loaded, which helps you debug faster.

  1. Open tokyo.html and add an <h1> heading that says Tokyo.
  2. Add a short paragraph describing what the page will be about.
  3. Repeat for osaka.html, hiroshima.html, and matsuyama.html using the correct city name.
 
<h1>Tokyo</h1>
<p>This page will include facts, images, and links about Tokyo.</p>

6. Navigation works best when every page links to every other page

If only the home page contains links, users cannot move easily between pages without going back first, which creates unnecessary steps and makes the site feel awkward. A navigation bar solves this by providing the same set of links on every page, so users can jump directly to the page they want.

Consistent navigation is important because users build habits based on where links appear, and changing the navigation layout across pages increases mistakes. The simplest approach is to copy the same navigation HTML into each file so every page has identical links, which also makes testing easier.

  1. Create a navigation area near the top of index.html using a <nav> element.
  2. Inside it, add links to index.html, tokyo.html, osaka.html, hiroshima.html, and matsuyama.html.
  3. Copy the same <nav> block into the top of all four city pages.
 
<nav>
  <a href="index.html">Home</a>
  <a href="tokyo.html">Tokyo</a>
  <a href="osaka.html">Osaka</a>
  <a href="hiroshima.html">Hiroshima</a>
  <a href="matsuyama.html">Matsuyama</a>
</nav>

7. A <nav> element is a semantic label for navigation links

The <nav> tag tells the browser and other tools that the links inside are for site navigation, which gives the page clearer meaning than a generic container. This matters because screen readers and other accessibility tools can use <nav> to help users move around the page efficiently, instead of reading every link as if it was part of the main content.

Using semantic tags also makes your code easier to understand because it communicates intent, so future you can quickly identify which part controls page navigation. If you use random containers for everything, you can still build a page, but it becomes harder to maintain as the project grows, because structure is no longer obvious.

  1. Check that your navigation is inside <nav> on every page.
  2. Confirm that each page includes the same five links in the same order.
  3. Click through every link to confirm none of them are broken.

8. CSS can style the navigation so it looks like a bar, not plain links

By default, navigation links appear as standard blue underlined text, which is usable but looks unfinished, because it does not visually separate navigation from page content. CSS lets you control spacing, alignment, and colour so the navigation reads as a distinct interface element, which improves readability and reduces accidental clicks.

A common approach is to give the <nav> a background and padding, then style the links for consistent spacing, so the bar works even if the page content changes. If you do not style the link spacing, the nav may feel cramped and users may click the wrong link, especially on smaller screens or when projecting in class.

  1. Create a folder named css if you do not already have one.
  2. Create a file named style.css inside the css folder.
  3. Copy the CSS example into css/style.css and save the file.
 
nav {
  padding: 12px;
  background: #f0f0f0;
}

nav a {
  margin-right: 12px;
  text-decoration: none;
}

9. Your pages must link the CSS file or the styling will not apply

CSS does nothing until the HTML page loads it using a <link> element in the <head>, because the browser only applies styles it has been told to fetch. If one page forgets to link the stylesheet, that page will look different and break the consistent feel of the website, which makes it seem like the site is not connected.

The href for the stylesheet is also a relative path, so it must match the folder structure exactly, and a wrong path is a common reason styling “does not work”. Testing by refreshing each page after saving is important because the browser will not show changes until the new file is loaded, especially if the old version is cached.

  1. In every page file, add a <link> to css/style.css inside the <head>.
  2. Save all files and refresh each page in the browser.
  3. Confirm the navigation bar styling appears on every page.
 
<head>
  <title>Tokyo</title>
  <link rel="stylesheet" href="css/style.css">
</head>

10. Improve the navigation styling so it is clearer and easier to use

Good navigation styling makes links easy to see and easy to click, which reduces user mistakes, because users rely on navigation to move through the site quickly. Hover styling is helpful because it gives immediate feedback that something is interactive, and without feedback users may hesitate or click repeatedly.

Small CSS changes like bold text, stronger contrast, and a hover effect can make the interface feel deliberate, and they also make your site easier to use when projected on a classroom screen. If your colours have low contrast, some users will struggle to read the links, so clarity should matter more than decoration, especially for accessibility.

  1. Add the improved CSS rules to css/style.css.
  2. Refresh the page and hover your mouse over each navigation link.
  3. Check that the hover effect makes it obvious which link you are pointing at.
 
nav {
  padding: 12px;
  background: #f0f0f0;
  border-bottom: 1px solid #cccccc;
}

nav a {
  margin-right: 12px;
  text-decoration: none;
  font-weight: 600;
  color: #222222;
}

nav a:hover {
  text-decoration: underline;
}