How to link HTML pages in the same or different folders

# 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

Copied!
my-project/
  └── index.html
  └── about.html

Here is the code for the index.html file.

index.html

Copied!
<!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>

The code for this article is available on GitHub

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

index.html

Copied!
<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

Copied!
<!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

Copied!
<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

Copied!
<a href="./about.html">About</a>

And in about.html.

about.html

Copied!
<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

Copied!
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

Copied!
my-project/
  └── index.html
  └── pages/
    └── about.html

Here is the code for the index.html file.

index.html

Copied!
<!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>

The code for this article is available on GitHub

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

index.html

Copied!
<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

Copied!
<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

Copied!
my-project/
  └── index.html
  └── pages/
    └── about.html

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

pages/about.html

Copied!
<!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 code for this article is available on GitHub

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

pages/about.html

Copied!
<a href="../index.html">Home</a>

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

shell

Copied!
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

Copied!
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

Copied!
<!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

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

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

index.html

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

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

pages/public/about.html

Copied!
<!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 code for this article is available on GitHub

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

pages/public/about.html

Copied!
<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

Copied!
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

Copied!
<!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

Copied!
<!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

Copied!
<a href="/index.html">Home</a>

using slash prefix to navigate to root

The code for this article is available on GitHub

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

pages/public/about.html

Copied!
<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

Copied!
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

Copied!
<!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 code for this article is available on GitHub

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

index.html

Copied!
<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

Copied!
<!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

Copied!
<a href="../../index.html">Home</a>

Then it links to the admins.html file.

pages/public/about.html

Copied!
<a href="../private/admins.html">Admins</a>

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

shell

Copied!
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

Copied!
<!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 code for this article is available on GitHub

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

Copied!
<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

Copied!
<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.

You can use the search field on my Home Page to filter through all of my articles.

How to link HTML pages in the same or different folders

# How to link HTML pages in the same folder

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

# Linking to HTML pages in the same and different folders - More complex example

# Additional Resources

Borislav Hadzhiev