Absolute and Relative

There are two ways that you can link the files of your web site together. You can use absolute file references or you can use relative file references. An absolute reference is one that contains the domain name on the front (eg. http://www.felgall.com/xhtmlt01.htm) while a relative address leaves off the domain name and just specifies the location of the wanted file relative to the current file, the current page, or the domain (depending on how you code it).

There are major benefits to using relative links for all the file references within your site and reserving the use of absolute references for when you want to link to pages on other sites. The biggest of these benefits is that with all of the internal references on your site being relative, you can easily create a working backup copy of your site on your own computer so as to allow you to test any changes properly before implementing them. If you were to use absolute references then copying anything to your own computer would still reference everything else from your live site and you would be constantly downloading all of the other files every time you referenced the page as well as it being much harder to test changes affecting more than one file. Another benefit of using relative references where ever possible is that you ensure that no time is wasted doing domain name lookups in order to locate a domain that has already been found.

One of the problems with using relative references though is that what they are relative is not always obvious.

There are actually three different places that relative references can be relative to and in order for your relative references to work properly you need to be aware of what the specific reference is relative to. The simplest way to specify a relative reference to another file in the same folder (assuming that you have . in the include path, which it usually is) is to just specify the file name. Any includes that don't have a / or ./ on the front will be found by looking in each of the folders in the include path. If all your files are in the same folder then that's all there is to relative links. They become more complex though when you want to reference files in different folders (eg. if you put all your images into their own img folder).

Where all you are dealing with are files that will be delivered as is to the browser (ie. no server side processing) then the references to different folders is also relatively straightforward. To reference a file in a folder within the same folder as the current file you just add the folder path to the front of the file name (eg. img/myimg.gif). If it is in a folder that is at the same level as the one containing the current file then you need to go up a level first (eg. ../img/myimg.gif). The final way of referencing files relatively in this situation is to just make all of the references relative to the domain itself rather than relative to the current file. We do that simply by adding a slash on the front of the relative address (eg. /img/myimg.gif).

Where things get more complicated with relative references is where you have server side processing and have one file including another from a different folder. That include of itself is actually no more complex than for references that will make it to the browser instead of being handled on the server. The problem comes though if that included file itself contains another included file. Is this nested include relative to the file that constains the reference or is it relative to the page that included that first file? The simplest way out in this instance would be to make all of these references relative to the domain root by having the leading slash on the front of the references but this may result in the references being longer than they need to be. The alternative if you just want to be able to distinguish between references relative to the current file and references relative to the current page is to remember that unless you tell it otherwise, relative references are always relative to the current web page location. Where you need to make a reference relative to the current file and that file isn't in the same folder as the current page then you need to add ./ to the front of the reference in order to identify it as relative to the current page.

Making all of your internal references on your site relative not only allows a copy of the site to function the same way as the original but the code that makes up those references is also a lot shorter than fully qualified absolute references would be. Also it is relatively easy to determine if you have in fact coded your relative links correctly since if the file you are trying to reference is not in the spot where you told the page to look for it then your page will not work properly and so you can fix it while testing your pages before uploading them to your site.

Links to anything not on your site will of course need to use absolute references and only off site references should be made using absolute references.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow