Learn HTML · Lesson 4 of 8 · about 15 minutes

More pages and folders

So far your site is one page. In this lesson it becomes a website: a few pages, a menu that links them, and folders that keep the files tidy. You'll also learn how to write the address of one file from another, which is the part that confuses everyone at first.

Why the home page is called index.html

When someone visits an address that doesn't name a file, like https://sam.pagehaus.site/, the web server has to pick one to show. By a convention that's older than most websites, it looks for a file called index.html in that folder. That's why your home page has that name: it's the page people get when they type just your address.

Every other page can have any name you like, as long as it ends in .html and follows the habits from lesson 3: lowercase, no spaces.

Add a second page

The easiest way to start a new page is to copy one you already have. Make a copy of index.html in the same folder, call it recipes.html, and change it to this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Recipes · Sam Rivera</title>
</head>
<body>
  <nav>
    <a href="index.html">Home</a> |
    <a href="recipes.html">Recipes</a>
  </nav>

  <h1>Recipes</h1>
  <p>The things I bake most, written down so I stop forgetting them.</p>
  <ul>
    <li>Sourdough bread</li>
    <li>Cinnamon buns</li>
  </ul>
</body>
</html>

Notice the new <title>: every page needs its own, because it's what appears on the tab and in search results. Putting your name after the page's name, as here, is a common pattern.

A menu to link the pages

The <nav> at the top of that page is a menu. <nav> works like a box that says "these are the site's main links", which helps screen readers offer a shortcut to it. Inside are ordinary links, with a | between them so they don't run together:

<nav>
  <a href="index.html">Home</a> |
  <a href="recipes.html">Recipes</a>
</nav>

Add the same <nav> to the top of index.html, just after <body>. Now open either page in your browser and click back and forth between them.

The addresses here are just file names, like recipes.html. You saw in lesson 3 that the browser looks for a name like this in the same folder as the page it's on. That's called a relative address: it's relative to where the page is.

Yes, you'll have to copy the menu into every page, and change every copy when you add a page. That gets tiresome by the third page. Lesson 6 shows how to write it once.

Folders keep things tidy

A site with ten photos and twenty pages in one folder is hard to find your way around. Most sites put images in a folder of their own, and group pages that belong together. Here's where Sam's site is heading:

my-site/
  index.html
  recipes.html
  images/
    bread.jpg
  recipes/
    sourdough.html

Create an images folder inside my-site and move bread.jpg into it. Your home page's picture is now broken, because bread.jpg isn't next to index.html anymore. Fix it by adding the folder to the address:

<img src="images/bread.jpg" alt="A round loaf of bread on a wooden board" width="400">

images/bread.jpg means "go into the images folder, and take bread.jpg". Use a forward slash /, never a backslash \, even on Windows.

Going up a folder with ../

Now make a recipes folder, and a page in it called sourdough.html. Link to it from the list on recipes.html:

<ul>
  <li><a href="recipes/sourdough.html">Sourdough bread</a></li>
  <li>Cinnamon buns</li>
</ul>

Here's the new page. Look at its addresses:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sourdough bread · Sam Rivera</title>
</head>
<body>
  <nav>
    <a href="../index.html">Home</a> |
    <a href="../recipes.html">Recipes</a>
  </nav>

  <h1>Sourdough bread</h1>
  <img src="../images/bread.jpg" alt="A round loaf of bread on a wooden board" width="400">
  <h2>You'll need</h2>
  <ul>
    <li>500 g bread flour</li>
    <li>350 g water</li>
    <li>100 g active starter</li>
    <li>10 g salt</li>
  </ul>
  <h2>Method</h2>
  <ol>
    <li>Mix everything and leave it covered for an hour.</li>
    <li>Fold the dough every half hour, four times.</li>
    <li>Shape it, then leave it in the fridge overnight.</li>
    <li>Bake at 240 °C in a covered pot for 45 minutes, uncovering it for the last 15.</li>
  </ol>
</body>
</html>

This page is inside the recipes folder, so a plain index.html would mean recipes/index.html, which doesn't exist. ../ means "go up one folder": out of recipes, back into my-site. From there, ../index.html finds the home page and ../images/bread.jpg finds the photo.

Relative addresses come down to three moves:

Write	To mean	Example
`name.html`	A file in the same folder as this page	`recipes.html`
`folder/name`	Go down into a folder	`images/bread.jpg`
`../name`	Go up one folder (`../../` goes up two)	`../index.html`

When you're unsure, start from the page you're writing in, and follow the path folder by folder, the way you'd click through folders on your computer.

What about addresses starting with /?

You'll see addresses like /images/bread.jpg on other sites. A leading / means "start from the top of the website", so the same address works from any page, in any folder. That's handy, but it works only once your site is on a web server: when you open the file from your computer, the "top" is the top of your hard drive, and nothing is found. Stick with relative addresses for now, and your site works the same on your computer and online.

Tidier addresses, if you want them

Because servers look for index.html in any folder, you can use that for neat addresses. A recipes folder with an index.html in it is reached online at https://sam.pagehaus.site/recipes/, with no .html on the end. It's optional: plain recipes.html is perfectly fine. If you do it, link to recipes/index.html in full, so the link also works when you open the site from your computer.

If it doesn't work

"File not found" or a broken image after moving things: every address that pointed at the old place needs updating. Follow the path from the page you're on, step by step, and check the spelling and capitals of each folder (Images and images are different online).
A link from a page in a folder goes to the wrong place: it probably needs a ../ at the start.
The browser shows a list of files instead of a page: the link points at a folder, like recipes/. On your computer, link to the file itself: recipes/index.html.
Links work on Windows but not online: look for \ in addresses, and change it to /.

Check your work

You have at least two pages, and each has its own <title>.
Every page has the menu, and you can click from any page to any other.
Your photo is in an images folder and still shows on every page that uses it.
You have a page inside a folder whose links use ../, and they work.

Your site works, but it still looks like a document from 1995. Next, you'll give it colours, fonts and a layout with CSS.