Sample Website

This is Page 4

The difference between absolute and relative links.

Absolute Links

An absolute link uses a path that leads to a source outside of your own directory.

For instance: You want to create a link to an image on someone elses website.

You would use something like:
<img src="https://www.somewebsite.com/images/picture.jpg">

This will work for some time, but problems can occur if or when that particular website no longer exists, or if the owner changes or moves that particular image.
Then you end up with a broken link (a link that points nowhere).

Example of absolute link:  puppy
With the link above, I have no control on how long it will remain working, since the link points to an image on a website that doesn't belong to me.

Relative Links

A relative link uses a path that leads to a source within your own directory.
The examples below assume there is an image named 'dog.jpg' in the root directory.

In the link below, dog.jpg is in the same directory.
<img src="dog.jpg">


Below, dog.jpg is in the same directory (same result as above).
<img src="./dog.jpg">


Below, dog.jpg is in the images folder of the same directory.
<img src="images/dog.jpg">


Below, dog.jpg is in the images folder, which is in the files folder.
<img src="files/images/dog.jpg">


Below, dog.jpg is in a folder one level up from current directory.
<img src="../dog.jpg">


Below, dog.jpg is in a folder two levels up from current directory.
<img src="../../dog.jpg">