Absolute vs Relative file paths

In this article,we observe the importence of absolute and relative file path of internet files that are placed in own domains or other domains. html document can be rendered atleast a document file. these files are linked to a document like CSS,Javascript,images,flash files.A path basically tells a web browser, where another file is located.

Types of paths

• Absolute path
• Site root relative path
• Document relative path

Absolute Path

These are absolute server paths, they are relative in regards to your http document directory.generelly we place them with URL of the site.main advantages of these absolute path are we can manipulate the dynamicall genereated MIM types,that results in caching the assets,avoiding the caches.we can move document in site directory where ever. we can refer regard less of the sites.

Examples:-

image

<img src="http://www.maheshchari.com/images/image.jpg" width="120" height="110" />

javascript source file

<script src="http://www.maheshchari.com/images/javascriptsrcfile.js" type="text/javascript" ></script>

CSS file

<link href="http://www.maheshchari.com/images/style.css" rel="stylesheet" type="text/css" />

 

Site root relative path

These are semi absolute paths, in the main absolute path from above examples we replace http://www.maheshchari.com/images/ with just / .but these assets can be accesed to single working domain only.

Examples:-

image

<img src="/images/image.jpg" width="120" height="110" />

javascript source file

<script src="/images/javascriptsrcfile.js" type="text/javascript" ></script>

CSS file

<link href="/images/style.css" rel="stylesheet" type="text/css" />

Document relative path

these are document relative path,assuming present working document in site root directory.below examples works.main disadvantage of these document relative path,if we move the present working document

Examples:-

image

<img src="images/image.jpg" width="120" height="110" />

javascript source file

<script src="images/javascriptsrcfile.js" type="text/javascript" ></script>

CSS file

<link href="images/style.css" rel="stylesheet" type="text/css" />

 

if present document moved in to one deeper directory.

Examples:

<img src="../images/image.jpg" width="120" height="110" />