// Articles / Absolute and Relative Paths

There are a few options to chose from, when entering the URL's, or paths to content. This goes both for CSS files, images, and whatever you might link to. The options are listed below:

1. Root Relative Paths
2. Document Relative Paths
3. Absolute Paths

When linking to external content, such as other websites. We are left with a single choice, that is the Absolute Paths.

Root Relative Paths

Alternative Titles: html relative path

These are Relative to the Root of your server, I.E. Linking from SubDir/Page2.html to Page.html in the same directory by the Root Relative Path:

/SubDir/Page.html

Is the equilivant of the Document Relative Path:

Page.html

Root Relative are very useful for websites using Mod Rewrite. One of the most frequently occurring problems beginners will encounter, is broken links when using Document Relative Paths togetter with Mod Rewrite.

A Rough Example

The root of the server may refer to htdocs, or the directory where you usually place the index.html I.E. http://www.brugbart.com/ThisIsTheRoot

Document Relative Paths

Note. These paths are known to break when you change the site structure, such as if you decide to anable Mod Rewrite later. therefor its recommended either to use Root Relative Paths, or Absolute Paths.

If you want to link to SubDir/Page.html from index.html in the root by using the Document Relative way, you would do like below:

SubDir/Page.html

Linking from SubDir/Page.html to a page in the root would require the following path:

../PageInRoot.html

The "../" in front of the page name, basicly says go up one. If you need to go up more then one time, IE. When having more SubDirectories, simply add more dots as needed. The below will go up 3 times, I.E. From SubDir/SubDir/SubDir/Page.html

../../../PageInRoot.html

Absolute Paths

Absolute Paths are entered as follows:

http://www.brugbart.com/SubDir/Page.html

Document Relative Paths can also be useful when used right, but the gain is not worth the risk of getting broken links later, if you update your sites structure. The main gains from using the Relative Paths, is that it may be more convenient to type in and remember, and that it usually lowers the file-size.

Example

To understand this Article, you may use the below as your reference. First lets link to an image located in the same directory as the .html file, using a document relative path:

<p><img src="MyImage.jpg" alt="An Image"></p>

Next lets link to an image in a SubDirectory using a root relative path:

<p><img src="/SubDir/MyImage.jpg" alt="An Image"></p>

Finally we have the Absolute Path, which is mostly used for External links:

<p><a href="http:www.brugbart.com/">Absolute Link for Brugbart</a></p>

As a final note, using Root Relative Paths for CSS files, will fix most broken links introduced by Mod Rewrite.