A path, in effect, is like a postal address. Paths generally lead to a file (e.g. image) or a folder (e.g. directory).
Web root vs. document root
A web root is the upper most layer of your website in which all files and subdirectories are stored. Generally this is where the home page is stored.
A document root is relative to the location of the document.
Note: A document root and web root can be one and the same if the document is located in the web root. Both web roots and document roots can be defined either absolutely or relatively.
Absolute path vs. relative path
An absolute path is simply a complete path and always starts from the web root.
A relative path is simply a short hand version of the absolute path. Usually you’re simply omitting the scheme (http), host (www), domain (www.somesite.com) and port (com). There are two ways of defining a relative path.
Document relative path
A document relative path is the more common type of relative paths. It’s important to note that there is no preceding forward slash.
Such a path allows you to freely move up and down your sites hierarchy by adding “../” before the document relative path.
The path becomes relative to the root above the document realtive path for every “../” added. The following will jump up three roots for example:
Root relative paths
A root relative path is relative to the web root where your overall home page resides. Such a path is useful for files that are to be universally included across an group of or all of your web pages (e.g. a header). A document relative path will not work if the location of the documents (web pages) vary. For this reason, the universality of the root relative path will do the trick. It’s important to note that there is no preceding forward slash.
The preceding forward slash matters!
It’s critical to understand that a preceding forward makes the difference between a document relative path and a root relative path.
Everything’s obvious in hindsight, eh?