35

I have a website, let's call it example.com. Within this site, I have some FAQs but the person that built the site saved the FAQ pages under a directory on the site named "FAQs".

As an example an FAQ page would be located at:

example.com/pages/en/faqs/faq-page1.html.

Note the pages/en/ directory. Ideally I would like all the pages to be saved under example.com/index.html etc but I can't change this.

Anyway, when I am on any of these FAQ pages, and I try to link back to say the home page index.html the navigation won't go to the page. So for example, when I am on:

example.com/pages/en/faqs/faq-page1.html

and I try to link back to the home page

example.com/pages/en/index.html (which is where the index page is saved) the nav won't work. Instead it will try to go to example.com/pages/en/faqs/index.html.

Now I am assuming this happens because I am in the "faq" directory, but how do I go back to the root directory when linking? The code for the link is simply <a href="index.html">Home</a>. I could of course just put in the full link example.com/pages/en/index.html, which would solve this but is there another way around this?

starball
  • 20,030
  • 7
  • 43
  • 238
zik
  • 3,035
  • 10
  • 41
  • 62

3 Answers3

56

You need to give a relative file path of <a href="../index.html">Home</a>

Alternately you can specify a link from the root of your site with <a href="/pages/en/index.html">Home</a>

.. and . have special meanings in file paths, .. means up one directory and . means current directory.

so <a href="index.html">Home</a> is the same as <a href="./index.html">Home</a>

Robb
  • 3,801
  • 1
  • 34
  • 37
23

There are two type of paths: absolute and relative. This is basically the same for files in your hard disc and directories in a URL.

Absolute paths start with a leading slash. They always point to the same location, no matter where you use them:

  • /pages/en/faqs/faq-page1.html

Relative paths are the rest (all that do not start with slash). The location they point to depends on where you are using them

  • index.html is:
    • /pages/en/faqs/index.html if called from /pages/en/faqs/faq-page1.html
    • /pages/index.html if called from /pages/example.html
    • etc.

There are also two special directory names: . and ..:

  • . means "current directory"
  • .. means "parent directory"

You can use them to build relative paths:

  • ../index.html is /pages/en/index.html if called from /pages/en/faqs/faq-page1.html
  • ../../index.html is /pages/index.html if called from /pages/en/faqs/faq-page1.html

Once you're familiar with the terms, it's easy to understand what it's failing and how to fix it. You have two options:

  • Use absolute paths
  • Fix your relative paths
Álvaro González
  • 142,137
  • 41
  • 261
  • 360
9

To go up a directory in a link, use ... This means "go up one directory", so your link will look something like this:

<a href="../index.html">Home</a>
lonesomeday
  • 233,373
  • 50
  • 316
  • 318