Absolute vs relative URLs

Question

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

In addition, which o

Answer 1

There are really three types that should be discussed explicitly. In practice though URLs have been abstracted to be handled at a lower level and I would go as far as to say that developers could go through their entire lives without writing a single URL by hand.

Absolute

Absolute URLs tie your code to the protocol and domain. This can be overcome with dynamic URLs.

https://dev.example.com/a.html?q=

Absolute Pros:

1. Control - The subdomain and protocol can be controlled. People that enter through an obscure subdomain will be funneled into the proper subdomain. You can hop back and forth between secure and non-secure as appropriate.

2. Configurable - Developers love things to be absolute. You can design neat algorithms when using absolute URLs. URLs can be made configurable so that a URL can be updated site-wide with a single change in a single configuration file.

3. Clairvoyance - You can search for the people scraping your site or maybe pick up some extra external links.

---

Root Relative

Root Relative URLs tie your code to the base url. This can be overcome with dynamic URLs and/or base tags.

.example.com/index.php?q=

Root Relative Pros:

1. Configurable - The base tag makes them relative to any root you choose making switching domains and implementing templates easy.

---

Relative

Relative URLs tie your code to the directory structure. There is no way to overcome this. Relative URLs are only useful in file systems for traversing directories or as a shortcut for a menial task.

index.php?q=

Relative Cons:

1. CONFUSING - How many dots is that? how many folders is that? Where is the file? Why isn't it working?

2. MAINTENANCE - If a file is accidentally moved resources quit loading, links send the user to the wrong pages, form data might be sent to the incorrect page. If a file NEEDS to be moved all the resources that are going to quit loading and all the links that are going to be incorrect need to be updated.

3. DOES NOT SCALE - When webpages become more complex and views start getting reused across multiple pages the relative links will be relative to the file that they were included into. If you have a navigation snippet of HTML that is going to be on every page then relative will be relative to a lot of different places. The first thing people realize when they start creating a template is that they need a way to manage the URLs.

4. COMPUTED - They are implemented by your browser (hopefully according to RFC). See chapter 5 in RFC3986.

5. OOPS! - Errors or typos can result in spider traps.

---

The Evolution of Routes

Developers have stopped writing URLs in the sense being discussed here. All requests are for a website's index file and contain a query string, aka a route. The route can be thought of as a mini URL that tells your application the content to be generated.

    http://dev.example.com/index.php/my:whacky:url

Routes Pros:

1. All the advantages of absolute urls.
2. Use of any character in URL.
3. More control (Good for SEO).
4. Ability to algorithmically generate URLs. This allows the URLs to be configurable. Altering the URL is a single change in a single file.
5. No need for 404 not founds. Fallback routes can display a site map or error page.
6. Convenient security of indirect access to application files. Guard statements can make sure that everybody is arriving through the proper channels.
7. Practicality in MVC approach.

---

My Take

Most people will make use of all three forms in their projects in some way or another. The key is to understand them and to choose the one best suited for the task.