Linking to Other Pages on Your Own Website
Linking to Other Pages on Your Own Website
~9 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026
So far, Finn's website only consists of one single file: index.html. But real websites usually have several pages - a home page, an about-me page, a contact page. In this chapter we'll create the second page and link it up.
Creating a second file
In your my-website folder (the same folder as index.html), create a new file called players.html. Fill it in with the familiar boilerplate and a bit of content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Favourite Players - Finn's Football Website</title>
</head>
<body>
<h1>My Favourite Players</h1>
<p>Here I introduce my favourite players.</p>
</body>
</html>Your project folder now has two files:
my-website/ index.html players.html
Relative paths: the "in this folder" signpost
Now let's link from index.html to players.html. Since both files live in the same folder, the file name alone is enough as the href value:
<a href="players.html">My Favourite Players</a>This is called a relative path - "relative" means "in relation to the current file". The browser understands this as "look for a file called players.html in the same folder as this page". That's the difference to the absolute path we used in the last chapter (https://www.fifa.com) - that's a complete address that works from anywhere.
Adding the link
Add this link right at the top of index.html, directly below the main heading:
<h1>Finn's Football Website</h1>
<p><a href="players.html">My Favourite Players</a></p>Save both files, reload index.html in your browser, and click the link. You've now arrived at your second page!
Linking back
A good website always lets visitors find their way back. Add a link back to the home page in players.html too:
<h1>My Favourite Players</h1>
<p>Here I introduce my favourite players.</p>
<p><a href="index.html">Back to the home page</a></p>Tipp: A very common mistake with relative paths: mistyping the file name (capitalisation often matters, especially once a website goes live!) or moving a file into a different folder without updating the path in the link. If a link is "broken", the file name in href is almost always the first thing to check.
Achtung: Pay close attention to capitalisation: Players.html and players.html are two completely different files for many servers, even if your own computer might not be that strict. It's best to get into the habit of using all-lowercase file names right from the start.