« Duplicate Content Vs. Syndication Continued | Using the Windows Hosts File To Test A Site »
June 17, 2008
Absolute Vs Relative URLs
Absolute Vs Relative URLs
By Scott Goodyear
Working on a new site? Testing code before it goes on a live server? Reading through Google Groups, John Mu talks about the pluses and minuses related to absolute vs. relative URLs. He says that as a negative absolute URLs "cannot be tested on a staging / testing server (e.g. locally) (unless you insert the links dynamically)". I disagree with his suggestion as I'm a fan of absolute URLs and believe that there is a way around this, by using the Windows Hosts file on your PC. This first post discusses absolute vs. relative URLs in case you are not familiar with the difference.
Absolute Vs. Relative URLs
In case you are unfamiliar with absolute vs. relative URLs, a quick recap no what they are...
In the fake blog page mock up below, I have a few absolute links to sites that currently exist. When you click through the link, they work because the link exists.
| Boy, I'm such a geek. I love these fan made Star Wars action figures, this At-At Stroller, and this Tie Fighter computer case mod. This stuff is really inspiring and reminds me of the awe I had as a kid, watching the original movies. The newer movies /sigh, Jar Jar Binks...need I say more? |
What if I wanted to add navigation to the page such as this:
|
Boy, I'm such a geek. I love these fan made Star Wars action figures, this At-At Stroller, and this Tie Fighter computer case mod. This stuff is really inspiring and reminds me of the awe I had as a kid, watching the original movies. The newer movies /sigh, Jar Jar Binks...need I say more? |
Since the domain does not exist right now, lets pretend that the site is down as I'm moving to a new hosting company, an absolute link like this one will not work to test the navigation:
<a href="http://www.scotts-starwars-memories.com/absolute_vs_rel.html#relative">previous
post</a>
However I could use a relative link like this:
<a href="absolute_vs_rel.html#relative">previous post</a>
Thus if I'm testing the html page on my local hard drive I can still click through the link and see if the navigation works because my browser will add the first half of the link based on where the web page currently exists.
On the plus side, if I move this page to live web server, it will retain all of the relative URLs and I have very little if any edits to make in order to make sure that he page works as long as it works on my local hard drive. There are some caveats, but I won't cover all of those, only one that John hints at...
"...Relative URLs:
+ make it easy to move content around
+ make it easy to test locally and on a staging server
- are easy to break if linking to content that isn't moved as well
(stylesheet, graphics, etc)..."
Lets say you store your graphics under the main folder of your site like this:
http://www.scotts-starwars-memories.com/somegraphic.gif
and you usually save your HTML to the same location like this:
http://www.scotts-starwars-memories.com/chewbacca.htm
Then you move the HTML to a new location like this:
http://www.scotts-starwars-memories.com/archive/chewbacca.htm
If your coding on chewbacca.htm used a lot of relative linking, you really need to plan ahead or you'll probably break items in the code. For example maybe that relatively linked graphic on chewbacca.htm now looks for the graphic at: http://www.scotts-starwars-memories.com/archive/somegraphic.gif ... but you forgot too move all of your graphic files to the new folder structure... oops now you have broken images.
As John Mu says, there probably isn't an "absolute" answer as to when you should or should not use absolute or relative URLs. It is mainly a matter of choice. In my next post, I'll talk a bit about how the Windows Hosts file can be used to test a web site on your staging server regardless of if you use absolute or relative URLs.
← What is this?
