By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Relative Paths

How to use either root relative, or document relative paths on the web.

Created: 2012-02-25 16:41

There are two types of Relative Paths covered in this Article. The first we are going to talk about, is perhaps not as widely known as the other one. If web-designers used this one, rather than the last option, then we wouldn't see nearly as many problems coursed by broken URLs.

Root Relative Paths

When it comes to Root Relative Paths, you will find that its easier to maintain working links, whenever something is changed internally. If for example a page was to be moved to another directory, the normal document relative path would break, where's the Root Relative one would still work.

The Root Relative path begins with a dash "/". What this dash does, is to indicate that the Page should be looked for, from the root of the domain, rather than beginning from the directory where linking page is located. So if a page in the Root where to link to a page in a directory also placed in the Root, it would do something like below.


The above URL would be equivalent to, given that a page existed by that name on the given location. This would be referred to as an Absolute Path.

Document Relative Paths

The so called Document Relative Path, is relative to the placement of the linking resource. This means, if a page is placed in, and is linking to a Page in the root, it would need two dots and a dash in front of the page its linking to. The dots and the dash basically means "go back one step".


You can use multiple ../../, one for each directory the linking page is located in. Similarly, if a page from the root where to link to one in a subdirectory, it would simply do like below.


Relative vs Root Relative Paths

There are circumstances where Root relative paths are better. One such case is when linking external css files, since those wont be loaded, if for example you where to start using a subdirectory or category, and the pages in this would be delivered using the same server-side script. Broken layouts often happen when beginners start to use mod-rewrite for the first time, and overlook the effects of using document relative URLs.

See also

  1. Absolute and Relative Paths