[html] Links not going back a directory?

this is probably a silly question and I have the answer myself but I want to know if I am doing anything wrong. I have a website, let's call it www.mysite.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:

www.mysite.com/pages/en/faqs/faq-page1.html.

Note the pages/en/ directory. Ideally I would like all the pages to be saved under www.mysite.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:

www.mysite.com/pages/en/faqs/faq-page1.html

and I try to link back to the home page

www.mysite.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 www.mysite.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 www.mysite.com/pages/en/index.html, which would solve this but is there another way around this? Sorry for such a long post and I may have been able to explain this better but I can't :S

Thanks in advance.

This question is related to html broken-links

The answer is


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>

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