What is relative linking?


Lets consider the hard disk as a tree, with folders (directories) being the branches and leaves being the files.
Now, for example, we have a file X.gif in the folder IMAGES which again, is in mainwebsite_html..... We are also including for example's sake, another folder called FILES which supposedly contains all our other necessary files. Now the tree would look like this

mainwebsite_html
- IMAGES
-- X.gif, Y.gif

- FILES
-- SHOW_IMAGE.html


So we get to know that mainwebsite_html has a folder called images which contains X.gif and Y.gif.

My problem is that I need to access X.gif from a webpage called SHOW_IMAGE.html. Before we go into that, let me explain what relative and absolute paths are. Absolute paths would describe the entire path in total detail and would leave no room for mistakes. A relative path, on the other hand includes a . which means the same directory - or a .. which means one directory above. This means that we can have relatives paths specifying just the file name and give .'s or ..'s as per need.

ABSOLUTE PATH EXAMPLE to show where file X.gif is (accessed from anywhere): mainwebsite_html/images/X.gif (assuming mainwebsite_html is root) But in website reality the absolute path would be http://www.yourdomain.com/images/X.gif

RELATIVE PATH EXAMPLE to show where file X.gif is (accessed from FILES) : ../images/X.gif (indicates - go one folder up i.e. above FILES, to mainwebsite_html, then go to images and then show X.gif)

From this example you would come to know that if I had typed in ./../images/X.gif - it would mean I said remain in folder FILES, then go to mainwebsite_html and then go to images.

now, we use the same methodology in our website HTML code.
in my file SHOW_IMAGE.html, I want to display the image X.gif, so my code would look like this

src=../images/x.gif

simple, no?
now, suppose that this file SHOW_IMAGE.html was in mainwebsite_html , the line would simply read as

src=images/x.gif

Try other examples!

You want to access file image.gif in the images directory of mainwebsite_html from file foo.html

mainwebsite_html
-images
--image.gif
foo.html
Relative path is src=images/image.gif

mainwebsite_html
-images
--image.gif
-folder1/foo.html
Relative path is src=/images/image.gif

mainwebsite_html
-images
--image.gif
-folder1/folder2/foo.html
Relative path is src=../images/image.gif

mainwebsite_html
-images
--image.gif
-folder1/folder2/folder3/foo.html
Relative path is src=../../images/image.gif

Basically the ../images tells the browser to backup/out of a directory to look for images
../../images tells the browser to backup/out of 2 directories to look for images.

  • 1 Users Found This Useful
Was this answer helpful?

Related Articles

Can I access my domain without the "www" in front?

Yes. You will be able to access your domain address with or without the "www" in front of the...

Can I point additional domains to the same main page as my current domain?

Yes. This is also called Pointer domains in Siteworx or Parked domains in cPanel. Please see...

Do you maintain backups of my data?

We no longer provide free integrity backups since we make full use of redundant hardware raid...

Dreamweaver cannot determine the remote server time.

Dreamweaver cannot determine the remote server time. The select Newer and Synchronize commands...

How to find your login details in Client Area.

instead of requesting support to resent you your login details to one of your products, you can...