Absolute and Relative Paths
Posted The: 27/06/2008 At: 21:23
Last Edited: 06/10/2009 At: 19:50
Contents:
When a webdesigner talks about the paths, they usually mean the URL. URLs are addresses to Resources on the web, usually in forms of xhtml or html pages, CSS StyleSheets, RSS feeds, images, or flash animations.
Common Problems
Broken URLs
Beginners often have troubles with images not showing up, and its usually because they specified an invalid URL in their StyleSheets. Its therefor important to understand both how to work with absolute paths, and relative paths.
Mod-rewrite Breaking URLs
For the more advanced users its usually mod-rewrite which makes the URLs for images, and other external Resources break. This happens because they used Relative Paths instead of Absolute or Root Relative Paths. The solution is either to start using Root Relative, Absolute Paths, or to use a different URL system, which doesn't make use of subdirectories.
Root Relative Paths
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. Web developers new to mod-rewrite are likely to encounter the problem with broken URLs when using Document Relative Paths.
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
Which is best to Use?
Using Root Relative Paths for CSS files, will fix most broken URLs introduced by Mod Rewrite. They are also a good choice if your aim is to lower the file-sizes of your pages, and decrease load times.
In case someone copies your sites content, using absolute paths would usually place links back to your site, which currently helps your site in the search engines. So i would say, either use Absolute or Root Relative Paths.
Examples
To understand this Article, you may use the below as your reference. The below Examples shows how to enter the URL for an image located in the same directory as the .html file.
Document Relative Example
<p><img src="MyImage.jpg" alt="An Image"></p>
Root Relative Example
<p><img src="/SubDir/MyImage.jpg" alt="An Image"></p>
Absolute Example
<p><img src="http://brugbart.com/SubDir/MyImage.jpg" alt="An Image"></p>
Comments: [0]
