Absolute and Relative Paths

Tutorial on Absolute and Relative Paths in Windows, UNIX and the Web.

3517 views

By. Jacob

Edited: 2019-12-11 12:41

There is quote a few ways to write paths, depending on whether you are writing local file system paths, or URL addresses on the web.

It is fairly common to write the absolute path to a resource. On the web, absolute paths are usually used when linking to external resources.

On the web, relative paths works similar to how they work on a local file system, and are very useful when linking to on-domain resources.

Root-relative paths are very useful when you want to maintain flexibility, as they do not depend on the placement of the source file.

/SubDir/page-in-subdir.html

Document-relative paths are usually not recommended, as they prevent you from moving a source-file without modifying all of the resource paths.

SubDir/page-in-subdir.html

Protocol-relative paths are useful primarily for web-applications, allowing to omit the protocol used to host the linked resource. This is mainly useful when you are not sure if the resource is hosted on HTTPS or HTTP.

//www.beamtic.com/SubDir/Page.html

Each type of path has its own use cases, so there is no general recommendation saying that you should use one exclusively.

Root Relative

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 file. I.e. http://www.beamtic.com/ThisIsTheRoot

In HTML, Root relative URLs can be written like this:

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

Document Relative

Note. These relative paths may break when you change the site structure, such as if you decide to enable friendly URLs. therefor its recommended either to use Root Relative, or Absolute URLs.

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

Absolute URLs will include the domain and protocol used to access the resource. I.e.

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

You most likely only want to use absolute URLs when linking to external resources, such as CDNs, or when linking to other websites.

Protocol relative

Protocol relative URLs can be used to serve resources on the same protocol as the requested resource. This can be useful when making sure your content is being served using HTTPS. A protocol relative URL looks like:

//www.beamtic.com/SubDir/Page.html

Protocol relative URLs leaves out the http: part, and begins with two dashes, followed by the domain name.

Absolute vs Relative URLs

Using Root Relative URLs for internal resources (images, css files, etc), will fix most broken URLs introduced by server "friendly URL" systems. They are also a good choice if your aim is to lower the file-sizes of your pages, and thereby decrease load times.

Generally you would want to use root-relative URLs. But if you are using subdomains or CDNs, then you will be forced to use absolute URLs to link to those resources.