By using this site you agree to the use of cookies.

Learn more

Share via:

Absolute and Relative Paths

How to write paths, aka URLs, in HTML and CSS. This article deals with both absolute and relative paths.

Edited: 2017-03-12 12:57

Article image

There are four ways to write paths on the web. The first is the absolute URLs, which is usually used when linking to external resources located on other websites, or when serving content from CDNs.

Then there are three types of relative URLs which are used to link to resources on your domain. The first is called the root-relative, the second type is the document-relative, and finally we have the protocol relative type.

Each type of URL has it's own use cases, so there is no general recommendation saying that you should use one exclusively. People have made these claims in various articles on the web, but they do not understand the technical details, and are just making assumptions.

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.