Page to Page

Relative URL’s 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?

Well, 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."

Consider this example. We have a three-page site, with an index.html in the root directory, and two pages, about.html and contact.html in the child-directory /pages. 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?

Here are some ways you would link these files:

  • From Index to About: <a href="./pages/about.html">To About</a>
  • From About to Contact: <a href="./contact.html">Contact Me</a>
  • From Contact to Index: <a href="../">Back to Home</a>