Relative links on the internet are those where the full domain name is not specified but instead the location of the page or file is specified relative to the current page. For example instead of specifying the absolute address http://www.felgall.com/htmlt60.htm to link to this page from other pages on this site I specify the relative address htmlt60.htm which assumes that the page is located in the same domain and directory as the page that the reference is on. This is fairly straight forward when everything is in the root directory of the domain but gets somewhat more involved when pages are located in sub-directories and gets even more involved when you have include files located in sub-directories - especially when they in turn reference other files that may or may not be located in the same sub-directory.
To make the explanation of how the relative references work in the most complex cases as simple and easy to follow as possible I will present an example with files in various locations and discuss how they would use relative references to access one another. Let us assume that we have the following structure: the root directory contains two pages (index.html and pageone.htm) and two sub-directories. The first sub-directory is called includes and itself contains two modules that we will call module1.inc and module2.inc. The second directory called sales has a page within it called sales1.htm. This can be represented more visually like this:
To reference module1.inc from either index.html or pageone.htm we would use includes/module1.inc. The same applies to refer to includes/module2.inc. To reference them from the sales1.htm page we must first move from the sales directory to its parent directory. We do this by adding ../ to the front giving us ../includes/module2.inc.
That is fairly straightforward. It gets a bit more complex if we imagine that index.html includes module1.inc which references module2.inc which then in turn provides links to pageone.htm and sales1.htm. Let's consider these one at a time.
Note that the addition of ./ to the front of the relative address makes it relative to the location of the main page file that references the include file instead of relative to the include file itself. We need to use this whenever an include file references something outside of the directory that contains it but could of course refer to files within a sub-directory of that directory relative to the include file instead of relative to the main page file.
The biggest problem occurs if we have module2.inc used by both index.html and sales1.htm and we need to provide a link to pageone.htm. Relative to index.html we need ./pageone.htm but relative to sales1.htm we need ../pageone.htm. As we can't have both at the same time we either need to code mdule2.js in such a way that it determines where it was called from in order to provide alternative relative links or we need to specify the absolute address of pageone.htm instead.
This article written by Stephen Chapman, Felgall Pty Ltd.