Relative Links vs. Absolute Links
When working with website and creating web pages, there are two ways to reference an item – an item being a link, image or maybe something like a video file. Those two ways are either with a relative link or absolute link.
The simplest way to explain what each kind of link is, is to just show you:
Quite simply, a relative link is relative to the current page. In the above example, it’s right next to the current page (think: in the same folder). If the file is moved from where it is, then the link could break (it probably will). With absolute links, you’re giving the exact, full address (URL) to the page.
Here’s another relative link:
This one means to go up a directory and find the file there.
This one means go up one folder and find the file in that folder.
This one means find a folder under the one we’re in and find the file there.
Why Use One or the Other?
The benefit of absolute links is that they can be used anywhere and they work. The benefit of relative links is that if you need to change the domain name later, you can and you don’t have to change all your links – it’s more portable.
When using Joomla, another benefit of relative links is that if a page needs to be secure (SSL / “https” instead of “http”), then you don’t have to go and change all the links or image references on that page. It just happens automatically.
Which way is better? Well, we would probably say that going with relative links is the better choice.
More To Think About
Page names are case sensitive. Domain names are not case sensitive. (Also, email addresses are not case sensitive).
These two take you to the same place:
These two do not take you to the same place:
Remember that the text you use in the link helps with SEO. Linking the words “click here” to your About Us page tells Google that what you’re about is “click here” and that makes no sense. Better link text to use would be the words “about us” – for example:
Learn more about our company by <a href=”folder/page.html“>clicking here</a>.
Learn more about <a href=”folder/page.html“>our company</a>.
On this page, we’ve been showing absolute versus relative links with links (hypertext) but it’s also the same with images. For example:
With most content management systems, you’re not seeing the code unless you go into code view – so you’re not going to see this much. This is just kind of FYI.