Home / Knowledge Base / General / Relative Links vs. Absolute Links

Relative Links vs. Absolute Links

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:

Absolute link:

<a href="https://www.yourdomain.com/page.html">Link</a>

Relative link:

<a href="page.html">Link</a>

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:

<a href="../page.html">Link</a>

This one means to go up a directory and find the file there.

Another:

<a href="../folder/page.html">Link</a>

This one means go up one folder and find the file in that folder.

Another:

<a href="folder/page.html">Link</a>

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:

https://www.yourdomain.com/page.html

https://www.YourDomain.com/page.html

These two do not take you to the same place:

https://www.yourdomain.com/page.html

https://www.yourdomain.com/Page.html

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:

Not Good:

Learn more about our company by <a href="folder/page.html">clicking here</a>.

Better:

Learn more about <a href="folder/page.html">our company</a>.

Image References

On this page, we've been showing absolute versus relative links with links (hypertext) but it's also the same with images. For example:

Absolute:

<img src="https://www.yourdomain.com/image.jpg">

Relative:

<img src="image.jpg">

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.

SEO / PPC
Get found, increase conversion!
Website Marketing
Get your website noticed and get results.
Design Portfolio
Result driven design makes your website work 24/7 for your business.

What Our Clients Say

“Your company and its professionalism are proof positive that distance truly does not matter when completing a large project such as this.”
-Julie Hilliger
Malcolm-Eaton Enterprises
Our Clients Love Us - CLICK

Need Website Maintenance?

 

Put Our Team

To Work For You

Click Here

Website Financing Options Available
UpCity

FOLLOW US ON
Webstix in Madison, WI
2820 Walton Commons Ln.
Suite 108
Madison, WI 53718
608-277-7849 608-661-8529
magnifier
COVID-19 Update: Starting 3/24 we are working virtually. We're open. Let us know how we can help!Contact Us
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram