Tag Archives: html tips

what relative links and absolute links are and when to use them

When you place a link to a page or media that is on your server, use relative links.
If you are linking to something on another website (ie not on your server) use absolute links.

“What’s the difference between relative and absolute links?”

A ‘relative link’ doesn’t require the “http://yourdomain.com…” at the start, because the resource is on your server.

Here are some examples of relative links:

<a href="mypages.html">About Me</a>
<img src="mypic.jpg"/>
<a href="articles.php?tPath=3">My Page</a>



TIP: If you are using a url rewriter use the cart’s default urls, in relative link style:

USE:    <a href="pages.php?pID=2">Links</a>
NOT:   <a href="difference-between-relative-absolute-links.html">Links</a>




An ‘absolute link’ does require the “http://yourdomain.com…” at the start, because the resource is on another server.
Absolute links are sometimes referred to as ‘hard-coded’ links.

Here are some examples of absolute links:

<script href="https://www.google.com/jquery/repository/jquery1.1.min.js">
<img src="https://wwwbestpiceverofsand.com/pic1.jpg">

Why do both the absolute link examples start https?

If you link to content that will be displayed on an https:// page, unless you link ALL of the content on that page using https:// or relative links, you will get the dreaded ‘mix of insecure content’ warning which will alarm your customers (especially if it happens in the checkout area) and probably lose you the sale.

If you need to link to an external site (therefore use an absolute link), the site needs to provide the option of linking via https://. If it doesn’t, can you save the resource locally and use a relative link to that? (you should always checkout copyright ownership and license and if necessary contact the owner of the image/external content if you are planning on making a local copy for use from your server.)

Why is this stuff about relative links and absolute links important?

1. to avoid seeing warnings about insecure / secure content which can lose you business
2. to future-proof against any change of url writing

Where is this particularly relevant?

On your homepage, especially in introductory text (eg mainpage.php module) and in article and info pages.