Differences in declaring your root directory in HTML

Question

This has been bugging me for a long time so I need to ask the question.

What is the difference between / and ./, is it just down to server settings?

For example, if we were looking for an images folder in the root directory we would write:

<img src="/images">

However, another server will only accept it as follows:

<img src="./images">

It's not a biggie, but in an ideal world I'd like to think I could transfer my sites to another server relatively easily without having to update minor details like these.

Of course, I can declare it in PHP and set it once in a config file, but it really is bugging me. Why is there two methods for declaring the root?

Answer 1

To reference files relative to the current page, you can either write the path plainly without a prefix, or you can be explicit about it by prefixing with ./. To reach files with paths relative to the root of your site, you prefix the path with /.

Summary

/ absolute path (full path to resource from root directory)
./ relative path from current directory (equal to not specifying any folder prefix)
../ relative path from parent directory
../../ relative path from parent of parent

Examples

Current URL               Resource path          Resolves to

/pages/home.html          ./picture.jpg          /pages/picture.jpg
/pages/home.html          ../img/picture.jpg     /img/picture.jpg
/pages/about/home.html    /img/picture.jpg       /img/picture.jpg
/pages/about/home.html    img/picture.jpg        /pages/about/img/picture.jpg
/home.html                img/picture.jpg        /img/picture.jpg