Search code examples
htmldocument-root

Differences in declaring your root directory in HTML


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?


Solution

  • 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