From One Page to Another

Relative URLs help with building a site locally before pushing it to the web. This way you can develop on your local machine, and still have links to pages be valid. But how do we navigate to a different directory using a relative URL?

Consider this 4-page site, which has an “index.html,” an “about.html,” a “contact.html,” and a “gallery.html,” all of which link (or connect) to each other:

The directory of this site has the index.html in the root directory, and the other pages in the child-directory pages:

.
├── index.html
└──  pages/
    ├──  about.html
    ├──  contact.html
    └──  gallery.html

I have a menu at the top of each page that needs to link to each of these pages despite what page the visitor is currently on. So how do I do this?

Go Deeper (Forwards)

From Index to About: <a href="./pages/about.html">About</a>

This process may look familar, as you’ve been doing it with screenshots located in an images directory. When “going deeper” into our directory, we must add any additional sub-directories (folders) to our URL path, like <a href="./folder-name/page-name.html"

.
├── index.html
└──  pages/
    ├──  about.html
    ├──  contact.html
    └──  gallery.html

Same-Level

From About to Contact: <a href="./contact.html">Contact</a>

A single ./ states that we need to stay in the current level of our directory. If two pages are on the same level of a directory, the link would simply be <a href="./page-name.html">.

.
├── index.html
└──  pages/
    ├──  about.html
    ├──  contact.html
    └──  gallery.html

Go Shallower (Backwards)

From Contact to Index: <a href="../index.html">Home</a>

Not only can we go deeper, but we can also take steps backwards, going higher up in our directory. A link for this direction would look something like <a href"../page-name.html">.

If a single ./ states that we need to remain in the current level of our directory heirarchy, two ../ is effectively saying “to find this file, begin here and then step back a directory.”

.
├── index.html
└──  pages/
    ├──  about.html
    └──  contact.html

Note You will never have more than two “dots” in a path segment. Further stepping may look something like this: ../../../images/profile.png