Absolute Relative URL & HTML Base Tag – A Simple Guide

Welcome to a quick tutorial on absolute and relative URLs, also the use of the HTML <base> tag. Getting “missing” images and files on your web page? Made sure that the path is “correct”? Well, don’t be surprised, the URL is a common pitfall among many beginners.

  • Absolute URL refers to a “full website address”. For example, http://site.com/images/ape.jpg
  • Relative URL refers to a “partial address”. For example, images/ape.jpg
  • But take note that relative URLs are based on the current address. For example, if the current address is http://site.com/page/, the above relative URL will resolve to http://site.com/page/images/ape.jpg
  • An HTML base tag can be used to change the base URL. For example, with <base href="http://site.com">, the above relative URL will resolve to http://site.com/images/ape.jpg

That covers the quick basics, but let us walk through this issue a little more and on the use of the <base> tag. Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Notes Base Tag Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

HTML BASE TAG

All right, let us now into the issues with absolute/relative URLs, and on using the HTML base tag.

 

0) THE URL PROBLEM

Let’s say that:

  • All images are placed in http://site.com/assets/.
  • But the current address is http://site.com/products/fruits/.

So how do we insert images to make sure that images resolve to the correct URLs?

  • Using relative URL – <img src="../assets/IMAGE.JPG"/>
  • Using absolute URL – <img src="http://site.com/assets/IMAGE.JPG">

As you can see, the URL becomes a real pain regardless of relative or absolute. That is where people came up with the idea of a <base> tag.

 

1) BASIC HTML BASE TAG

1-basics.html
<head>
  <!-- (A) BASE MUST BE PLACED IN HEAD SECTION -->
  <base href="http://site.com/assets/" target="_blank">

  <!-- (B) BASE APPLIES TO SCRIPTS + CSS -->
  <script src="1-demo.js"></script>
  <link rel="stylesheet" href="1-demo.css"/>
</head>
<body>
  <!-- (C) APPLIES TO IMAGES, VIDEOS, AUDIO -->
  <img src="1-img.png"/>
  <video src="1-vid.mp4" width="256" height="144" controls></video>
  <audio controls src="1-sound.mp3"></audio>
</body>

What does the <base> tag do exactly? It changes the base of relative URLs. That is, all relative URLs in this examples will resolve to http://site.com/assets/XYZ. A couple of quick notes on the usage though:

  • The <base> tag must be placed in the <head> section, it is self-closing and does not require a </base>.
  • It takes in 2 properties.
    • href – The base URL.
    • target – Optional. To set if links will open up in the same window, same frame, or new tab.

 

 

2) MULTIPLE BASE TAGS WILL NOT WORK

2-multiple.html
<!-- (A) ONLY THIS WILL APPLY -->
<base href="http://localhost/assets/" target="_blank">

<!-- (B) ALL THE REST WILL BE IGNORED -->
<base href="http://somesite.com/assets/" target="_self">
<base href="http://yeehaw.com/assets/" target="_self">

For you curious ones who are wondering what happens when we add multiple <base> tags – Only the first one will be accepted and the rest will be ignored.

 

3) THE BASE TAG IS “NOT WORKING”!

3-not-work.html
<!-- (A) THIS IS WRONG -->
<base href="http://localhost/assets" target="_blank">
 
<!-- (B) THIS IS CORRECT
<base href="http://localhost/assets/" target="_blank">
-->
 
<!-- (C) TEST IMAGE -->
<img src="1-cactus.jpg"/>

Annoying beginner “it is now working” problem – Notice why the first one is wrong? Take a closer look, the image will resolve to http://localhost/assets1-cactus.jpg.

 

 

4) NOT ALL IS GOOD

4-no-good.html
<!-- (A) BASE MUST BE PLACED IN HEAD SECTION -->
<base href="http://site.com/assets/" target="_blank">
 
<!-- (B) LINKS ARE AFFECTED AS WELL -->
<a href="citrus/">Citrus Fruits</a>
<a href="#top">Back To Top</a>

For you guys who are thinking “the base tag is going to solve all my relative URL pains” – Bad news, it applies to anchor links as well. In this example:

  • Instead of linking to http://site.com/products/fruits/citrus/, it now goes to the wrong http://site.com/assets/citrus.
  • That also includes same page bookmarks – http://site.com/assets/#top.

 

5) OVERRIDING THE BASE TAG

5-override.html
<!-- (A) BASE MUST BE PLACED IN HEAD SECTION -->
<base href="http://site.com/assets/" target="_blank">

<!-- (B) BASE WILL NOT APPLY TO ABSOLUTE URL -->
<a href="http://site.com/products/fruits/citrus/">Citrus Fruits</a>
<a href="http://site.com/products/fruits/#top">Back To Top</a>

How do we solve the link problem? Remember that the <base> tag will only apply to relative URLs? To override it, simply put in the full absolute URL.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

MORE TROUBLE THAN HELP

After all these examples, I have an important confession to make – I really hate the <base> tag. It may seem useful at first, but it eventually ends up messing up all the URLs on the page. So my recommendation, avoid using it at all costs. The better alternative is to use server-side scripts to help you manage the URLs. In PHP for example:

<?php
// (A) DEFINE URLS IN PHP
define("URL_HOST", "http://site.com/"); 
define("URL_ASSETS", URL_HOST . "assets/");

// (B) APPEND URL USING PHP ?> 
<img src="<?=URL_ASSETS?>IMAGE.JPG"/>
<a href="<?=URL_HOST?>products/">Products</a>

Yep, this is the smarter way to handle things. Always use absolute URLs, and use server-side scripts to manage them. Trust me, you can live without using the <base> tag.

 

INFOGRAPHIC CHEAT SHEET

How To Use The HTML Base Tag (click to enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *