How to link HTML pages in the same or different folders

avatar
Borislav Hadzhiev

Last updated: May 17, 2023
5 min

banner

# How to link HTML pages in the same folder

The easiest way to link HTML pages that are in the same or different folders is to use a relative path.

A relative path is one that is specified relative to the current HTML file.

For example, suppose that we have the following folder structure.

shell
my-project/ └── index.html └── about.html

Here is the code for the index.html file.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Home bobbyhadz.com</title> </head> <body> <h2>Home | bobbyhadz.com</h2> <a href="about.html">About</a> </body> </html>

Notice that we reference the about.html file using a relative path.

index.html
<a href="about.html">About</a>

This is possible because the file is located in the same directory.

Here is the code for the about.html file.

about.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>About bobbyhadz.com</title> </head> <body> <h2>About | bobbyhadz.com</h2> <a href="index.html">Home</a> </body> </html>

The about.html file also links to the index.html file using a relative path.

about.html
<a href="index.html">Home</a>

link html pages located in the same directory

When specifying a path to a file that is located in the same directory, you can also use the ./ prefix.

For example, in index.html:

index.html
<a href="./about.html">About</a>

And in about.html.

about.html
<a href="./index.html">Home</a>

The ./ prefix followed by a file simply means that we are referring to a file that is located in the same directory as the current HTML file.

Make sure to specify the extension of the file you are linking to, e.g. .html.

You can open your terminal in the same directory as your index.html file and use the npx serve . command to start a development server like the one shown in the short clip.

shell
npx serve .

# How to link to HTML pages located in a different folder

You can use the same approach when linking to HTML pages that are located in a different folder.

Suppose we have the following folder structure.

shell
my-project/ └── index.html └── pages/ └── about.html

Here is the code for the index.html file.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Home bobbyhadz.com</title> </head> <body> <h2>Home | bobbyhadz.com</h2> <a href="./pages/about.html">About</a> </body> </html>

Notice that we still used a relative path to the about.html page.

index.html
<a href="./pages/about.html">About</a>

We first go into the pages directory and then reference the about.html file.

We could've also specified the file path as follows.

index.html
<a href="pages/about.html">About</a>

The two examples above are equivalent and refer to an about.html file located in a pages/ directory.

shell
my-project/ └── index.html └── pages/ └── about.html

Here is the code for the pages/about.html file.

pages/about.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>About bobbyhadz.com</title> </head> <body> <h2>About | bobbyhadz.com</h2> <a href="../index.html">Home</a> </body> </html>

Notice that the file path this time starts with ../.

pages/about.html
<a href="../index.html">Home</a>

The ../ prefix is used to refer to a file that's located one directory up.

shell
my-project/ └── index.html └── pages/ └── about.html

The index.html file is located one directory up from the pages/about.html file.

link html pages located in different directories

Notice that when I click on the link to the about page, my browser navigates to /pages/about.

In other words, to an about.html file that's located in a pages/ directory.

If you have to specify a path to a file that's located two directories up, you would use the ../../ prefix.

Let's look at a different example.

Suppose we have the following folder structure.

shell
my-project/ └── index.html └── pages/ └── public/ └── about.html

This time the about page is located under pages/public/.

Here is the code for the index.html file.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Home bobbyhadz.com</title> </head> <body> <h2>Home | bobbyhadz.com</h2> <a href="./pages/public/about.html">About</a> </body> </html>

The link in the index.html file points to an about.html file that's located in a pages/public/ directory.

index.html
<a href="./pages/public/about.html">About</a>

We could've also specified the following path to achieve the same result.

index.html
<a href="pages/public/about.html">About</a>

Here is the code for the pages/public/about.html file.

pages/public/about.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>About bobbyhadz.com</title> </head> <body> <h2>About | bobbyhadz.com</h2> <a href="../../index.html">Home</a> </body> </html>

Notice that this time, we used the ../../ prefix to go 2 directories up.

pages/public/about.html
<a href="../../index.html">Home</a>

link html pages located two directories up

The first ../ prefix goes one directory up (to the pages directory) and the second ../ prefix goes one more directory up (to the my-project directory) where the index.html file is located.

shell
my-project/ └── index.html └── pages/ └── public/ └── about.html

You can also use the / prefix to refer to the root directory of your project.

Suppose we have the same folder structure as above where the index.html file is located in the root directory.

Here is the code for the index.html file.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Home bobbyhadz.com</title> </head> <body> <h2>Home | bobbyhadz.com</h2> <a href="./pages/public/about.html">About</a> </body> </html>

And here is the code for the pages/public/about.html file.

pages/public/about.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>About bobbyhadz.com</title> </head> <body> <h2>About | bobbyhadz.com</h2> <a href="/index.html">Home</a> </body> </html>

Notice that we used a prefix of / to refer to the root directory this time.

pages/public/about.html
<a href="/index.html">Home</a>

using slash prefix to navigate to root

The code sample achieves the same result as the one that used the following path.

pages/public/about.html
<a href="../../index.html">Home</a>

This works because the index.html file is located in the root directory of the project.

# Linking to html pages in the same and different folders - more complex example

Let's look at a more complex example of linking to HTML pages that are located in the same and different folders.

Suppose we have the following folder structure.

shell
my-project/ └── index.html └── pages/ └── public/ └── about.html └── private/ └── admins.html

Now we have a pages/ folder that contains:

  • a public/ directory with an about.html file.
  • a private/ directory with an admins.html file.

Here is the code for the index.html file.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Home bobbyhadz.com</title> </head> <body> <h2>Home | bobbyhadz.com</h2> <a href="./pages/public/about.html">About</a> <br /> <br /> <a href="./pages/private/admins.html">Admins</a> </body> </html>

The index.html file links to the about.html and admins.html pages.

index.html
<a href="./pages/public/about.html">About</a> <br /> <br /> <a href="./pages/private/admins.html">Admins</a>

And here is the code for pages/public/about.html.

pages/public/about.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>About bobbyhadz.com</title> </head> <body> <h2>About | bobbyhadz.com</h2> <a href="../../index.html">Home</a> <br /> <br /> <a href="../private/admins.html">Admins</a> </body> </html>

The page first links to the index.html file which is located 2 directories up.

pages/public/about.html
<a href="../../index.html">Home</a>

Then it links to the admins.html file.

pages/public/about.html
<a href="../private/admins.html">Admins</a>

The admins.html file is located in the private/ directory which is located one directory up.

shell
my-project/ └── index.html └── pages/ └── public/ └── about.html └── private/ └── admins.html

We first go one directory up (into the pages/ directory) then go into the private/ directory and reference the admins.html file.

Here is the code for the pages/private/admins.html file.

pages/private/admins.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Admins bobbyhadz.com</title> </head> <body> <h2>Admins | bobbyhadz.com</h2> <a href="../../index.html">Home</a> <br /> <br /> <a href="../public/about.html">About</a> </body> </html>

more complex folder structure

The pages/private/admins.html file links to the index.html and about.html files.

The index.html file is located two directories up.

pages/private/admins.html
<a href="../../index.html">Home</a>

The about.html file is located in the public/ directory which is one directory up.

pages/private/admins.html
<a href="../public/about.html">About</a>

I've also written a detailed guide on how to use the ES6 modules import/export syntax.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.