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?

Answer 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" 

Answer 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.