Absolute vs relative URLs

S

12

280

I would like to know the differences between these two types of URLs: relative URLs (for pictures, CSS files, JavaScript files, etc.) and absolute URLs.

In addition, which one is better to use?

Skewer answered 5/1, 2010 at 9:30 Comment(1)

seoclarity.net/resources/knowledgebase/… – Pap 20/7, 2020 at 18:17

N

212

In general, it is considered best-practice to use relative URLs, so that your website will not be bound to the base URL of where it is currently deployed. For example, it will be able to work on localhost, as well as on your public domain, without modifications.

Nucleolated answered 5/1, 2010 at 9:33 Comment(13)

+1 I agree. There might be (a few) times when absolute urls are better, for instance when using a CDN, or if you need to change the content website. Searching for a domain name is a lot easier than searching for relative urls IMHO. – Phinney 5/1, 2010 at 10:52

For maintenance purposes it can be easier to use root-relative URLs, without the domain name. i.e. On StackOverflow use the root-relative URL '/questions/2005079/absolute-vs-relative-urls' to link to this question. The '/' on the front makes the URL root-relative. This approach pays off when you go to move your files around or change the directory structure of your project. – Calistacalisthenics 5/6, 2012 at 4:48

The localhost argument is a good one, but when moving a site from one domain to another, a simple 'find & replace' action in TextMate, Coda or your favorite editor will solve it – Crystie 17/1, 2013 at 2:35

can you provide any sources? I've only read ever that absolute url's are a better idea. Also, you need to have some kind of system to make absolute urls anyways if you have an RSS feed. – Stoop 9/8, 2013 at 22:18

I know this answer is relatively old, but it still actual. If you can, please tell your opinion about this article, as it's opposite to you answer: yoast.com/relative-urls-issues – Chicoine 19/12, 2013 at 7:52

@Crystie But can you do that? I'm definitely a fan/proponent of using that method, but get into a bigger framework and large refactorings are a notoriously daunting/terrifying task. While you thought you may have switched them all, even in a smart IDE, often times they can be missed if they're coded into strings or dynamically created. The worst part of that is that usually those missed references aren't caught until after your solution goes back into production... :( – Landgraviate 21/12, 2013 at 3:22

I had the case that I used absolute URL's started with / so moving to another server should be possible, but then I deployed my app in www.mydomain.com/apps/ and now i can't find any resources ofc. Thats why I agree that relative URL's are safer - still they can messup when you reuse serverside templates in different routes, but there you can easily use header-redirects to send the user to the correct path before rendering. – Ruvolo 29/1, 2014 at 16:27

@Crystie 'find & replace' is no solution at all if your product is a deployed website which is shipped to customers – Bron 7/4, 2014 at 8:6

To use absolute links may try <a href="<?php echo $_SERVER['REQUEST_SCHEME'];?>://<?php echo $_SERVER['SERVER_NAME'];?>rest-of-url" – Weaponry 10/7, 2015 at 6:41

This is the absolute best answer to the question, relative to the other answers :) Furthermore I would point out that a number of SEO experts warn that absolute URLs are somehow better and that digital marketing executives should argue with developers and ask them to switch all URLs from relative to absolute. This one factor convinces me that relative URLs are in fact the way to go. – Stagner 1/3, 2016 at 7:0

Can a URL even be relative? Isn't the presence of the protocol what makes a URI and URL? – Rusk 30/1, 2017 at 20:31

an old but revelating answer on the terminology: https://mcmap.net/q/110205/-absolute-urls-relative-urls-and (relative path, absolute path, relative URL, absolute URL) – Rasbora 29/3, 2019 at 12:11

I'm really struggling to do it on both it will be able to work on localhost, as well as on your public domain, without modifications. I'm able to get it to my website domain and local computer but not Github can anyone help me please? – Unideaed 3/8, 2021 at 23:0

C

329

Should I use absolute or relative URLs?

If by absolute URLs you mean URLs including scheme (e.g. HTTP / HTTPS) and the hostname (e.g. yourdomain.example) don't ever do that (for local resources) because it will be terrible to maintain and debug.

Let's say you have used absolute URL everywhere in your code like <img src="http://yourdomain.example/images/example.png">. Now what will happen when you are going to:

switch to another scheme (e.g. HTTP -> HTTPS)
switch domain names (test.yourdomain.example -> yourdomain.example)

In the first example what will happen is that you will get warnings about unsafe content being requested on the page. Because all your URLs are hard coded to use http(://yourdomain.example/images/example.png). And when running your pages over HTTPS the browser expects all resources to be loaded over HTTPS to prevent leaking of information.

In the second example, when putting your site live from the test environment, it would mean all resources are still pointing to your test domain instead of your live domain.

So to answer your question about whether to use absolute or relative URLs: always use relative URLs (for local resources).

What are the differences between the different URLs?

First lets have a look at the different types of URLs that we can use:

http://yourdomain.example/images/example.png
//yourdomain.example/images/example.png
/images/example.png
images/example.png

What resources do these URLs try to access on the server?

In the examples below I assume the website is running from the following location on the server /var/www/mywebsite.

http://yourdomain.example/images/example.png

The above (absolute) URL tries to access the resource /var/www/website/images/example.png. This type of URL is something you would always want to avoid for requesting resources from your own website for reason outlined above. However it does have its place. For example if you have a website http://yourdomain.example and you want to request a resource from an external domain over HTTPS you should use this. E.g., https://externalsite.example/path/to/image.png.

//yourdomain.example/images/example.png

This URL is relative based on the current scheme used and should almost always be used when including external resources (images, JavaScript files, etc.).

This type of URL uses the current scheme of the page it is on. This means that you are on the page http://yourdomain.example and on that page is an image tag <img src="//yourdomain.example/images/example.png">, the URL of the image would resolve in http://yourdomain.example/images/example.png. When you would have been on the page https://yourdomain.example and on that page is an image tag <img src="//yourdomain.example/images/example.png"> the URL of the image would resolve in https://yourdomain.example/images/example.png.

This prevents loading resources over HTTPS when it is not needed and automatically makes sure the resource is requested over HTTPS when it is needed.

The above URL resolves in the same manner on the server side as the previous URL:

The above (absolute) URL tries to access the resource /var/www/website/images/example.png.

/images/example.png

For local resources this is the preferred way of referencing them. This is a relative URL based on the document root (/var/www/mywebsite) of your website. This means when you have <img src="/images/example.png"> it will always resolve to /var/www/mywebsite/images/example.png.

If at some point you decide to switch domain it will still work because it is relative.

images/example.png

This is also a relative URL although a bit different than the previous one. This URL is relative to the current path. What this means is that it will resolve to different paths depending on where you are in the site.

For example, when you are on the page http://yourdomain.example and you use <img src="images/example.png"> it would resolve on the server to /var/www/mywebsite/images/example.png as expected, however when your are on the page http://yourdomain.example/some/path and you use the exact same image tag it suddenly will resolve to /var/www/mywebsite/some/path/images/example.png.

When should I use what?

When requesting external resources, you most likely want to use an URL relative to the scheme (unless you want to force a different scheme) and when dealing with local resources you want to use relative URLs based on the document root.

An example document:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <link href='//fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700' rel='stylesheet' type='text/css'>
        <link href="/style/style.css" rel="stylesheet" type="text/css" media="screen"></style>
    </head>
    <body>
        <img src="/images/some/localimage.png" alt="">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    </body>
</html>

Some (kind of) duplicates

Carissacarita answered 17/2, 2014 at 12:18 Comment(12)

Does using absolute URLs load the page faster, than compared to using relative URLs? (Any time spent on resolving the relative path?) – Diverticulum 17/2, 2014 at 12:44

Any difference possible would be so little it is not something you should worry about if it is measurable at all. – Carissacarita 17/2, 2014 at 12:45

An example of including Google Jquery as protocolless: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> – Diverticulum 17/2, 2014 at 12:52

This answer assumes that absolute URLs aren't being generated dynamically which solves each issue mentioned. – Lasandralasater 15/5, 2014 at 16:6

J.Money is correct. Modern web frameworks have the notion of "reverse routing" to allow you to create URLS from one of your pages to another one of your pages (it has to be to another page in your same website). These allow you to give a name to a URL and then use this name instead of the URL. That way, if you ever want to change the URL, you can change the URL in one place, since everywhere else you only ever refer to that URL by its name. – Droit 15/9, 2015 at 18:54

You say "when you want to request a resource from an external domain over http you should use [http:// style]", then in the next paragraph you say protocol-relative links should "almost always be used when including external resources". Both paragraphs use images as examples. What's the difference? – Apnea 12/3, 2016 at 13:5

what about ../path/to/image.png? Is this root-relative? – Karlee 13/7, 2016 at 2:16

Yes that is relative to the current path @ReeceDodds. Say you are on https://foobar.com/my/awesome/subdir that URI points to https://foobar.com/my/awesome/path//to/image.png. It goes one level up from /my/awesome/subdir (..) and into /path/to/image.png. – Carissacarita 13/7, 2016 at 7:11

Great answer, thanks a lot! For the sake of clarity, shouldn't you replace //yourdomain.com/images/example.png by //externaldomain.com/images/example.png ? – Ernaldus 21/1, 2019 at 11:29

one thing that I have only just realized is that a relative url is not the same the same as a relative path on a filesystem, i.e url starting with single slash is considered relative but not affected by current path, so i considered this absolute, thanks for the clarification – Rf 5/10, 2021 at 8:35

nice answer! Curious if the same rules would also apply to the "action" attribute of html form? I did make some experiments and it looks like so, but couldn't find any source doc that specify this behavior. Can anyone confirm? – Chamois 31/10, 2021 at 18:55

When you said "however when your are on the page http://yourdomain.example/some/path and you use the exact same image tag it suddenly will resolve to /var/www/mywebsite/some/path/images/example.png" you actually mean that it will resolve to /var/www/mywebsite/some/images/example.png, without /path section, right? – Kato 27/3, 2023 at 20:25