Why would a developer place a forward slash at the start of each relative path?

Question

I am examining some code for a friend, and have found that the developer who built his site began each and every relative src, href, and include with a forward slash /.

For example:

src="/assets/js/jquery.js"

I have never seen this before. So my question is, why would a developer place a forward slash / at the start of a relative path?

Solution 1

It's done in order to root the path (making it an absolute path).

It ensures that the path is not relative but read from the root of the site.

This allows one to move a file around and not have to change the links to the different resources.

Using your example:

src="/assets/js/jquery.js"

If the referencing file is in /pages/admin/main.html (for example) using relative paths you would use:

src="../../assets/js/jquery.js"

Suppose you move the file to a child directory. No changes would be needed for with the original rooted path, but the relative one would need to change to:

src="../../../assets/js/jquery.js"

Solution 2

Adding on @Oded's answer, the slash makes the URL absolute.

For example:

/foo/bar/baz.css

This translates to:

http://www.example.com/foo/bar/baz.css

But without the slash, things become a bit different:

foo/bar/baz.css

This tells the browser to look in the current folder (not the root folder) for the directory foo and then the subsequent directories and the file.

---

Also, take for instance this HTML:

<script type="text/javascript" src="foo.js"></script>

If you move the HTML file into another folder, then the script will not load, as foo.js isn't being moved with the HTML file.

But if you use an absolute URL:

<script type="text/javascript" src="/foo.js"></script>

Then the JS file is loaded EXACTLY from http://www.example.com/foo.js no matter where the HTML file is.

Solution 3

This is to ensure the asset comes from the "root" of the web server.

e.g. Host is www.example.com URL becomes www.example.com/assets/js/jquery.js

I do this with project I want to ensure live on their own virtual host.

The issue really comes down to where those assets are being included. For example if the asset is being included from /help/pages/faq then the developer can be sure the path will work correctly when the site is hosted on a non changing host, e.g. example.com.

The issue of using relative paths, 'assets/js/jquery.js' is that if the assets are included from the /help/pages/faqs then the path becomes relative to that starting point, e.g. /help/pages/faqs/assets/js/jquery.js

Hope that helps