Welcome to a 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 confusion among many beginners.
- Absolute URL refers to a “full website address”. For example,
http://site.com/images/img.jpg
- Relative URL refers to a “partial address”. For example,
images/img.jpg
- 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 tohttp://site.com/page/images/img.jpg
- An HTML
<base>
tag can be used to change the base URL for relative URLs. For example, with<base href="http://site.com">
, the above relative URL will resolve tohttp://site.com/images/img.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!
TLDR – QUICK SLIDES
[web_stories_embed url=”https://code-boxx.com/web-stories/absolute-relative-url-base-tag/” title=”Absolute Relative URL & HTML Base Tag” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]
Fullscreen Mode – Click Here
TABLE OF CONTENTS
HTML BASE TAG & URLs
All right, let us now into the issues with absolute/relative URLs, and on using the HTML base tag.
PART 1) THE URL HASSLE
Let us start with the assumption of:
- All images are placed in
http://site.com/assets/
. - But the current address is
http://site.com/products/fruits/
.
To insert images properly:
- Using relative URL –
<img src="../assets/IMAGE.JPG">
- Using absolute URL –
<img src="http://site.com/assets/IMAGE.JPG">
As you can see, it is a hassle regardless of relative or absolute URL. This is where a <base>
tag can be potentially useful.
PART 2) BASE TAG APPLIES TO ALL RELATIVE URLs
<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="SCRIPT.JS"></script>
<link rel="stylesheet" href="STYLE.CSS">
</head>
<body>
<!-- (C) APPLIES TO IMAGES, VIDEOS, AUDIO, LINKS -->
<img src="IMAGE.JPG">
<video src="VID.MP4" width="256" height="144" controls></video>
<audio controls src="SOUND.MP3"></audio>
<a href="PAGE">LINK</a>
</body>
- The
<base>
tag must be placed in the<head>
section, it accepts 2 properties.href
– The base URL.target
– Optional. To set if links will open up in the same window, same frame, or new tab.
- It changes the base of all relative URLs – It does not matter if it is a script, image, video, sound, link, etc…
PART 3) COMMON MISTAKES
3A) MISSING SLASHES IN BASE URL
<!-- (A) THIS IS WRONG -->
<base href="http://site.com/assets" target="_blank">
<!-- (B) THIS IS CORRECT
<base href="http://site.com/assets/" target="_blank">
<!-- (C) IMAGE -->
<img src="IMAGE.JPG">
What is wrong with this example? Look closely – http://site.com/assets
is missing the trailing slash. For those who are still lost, the image URL will resolve to http://site.com/assetsIMAGE.JPG
.
3B) MULTIPLE BASE TAGS
<!-- (A) ONLY THIS WILL APPLY -->
<base href="http://site.com/images/">
<img src="IMAGE.JPG">
<!-- (B) ALL THE REST WILL BE IGNORED -->
<base href="http://site.com/videos/">
<video src="VID.MP4" width="256" height="144" controls></video>
<base href="http://site.com/audio/">
<audio controls src="SOUND.MP3"></audio>
So what happens if the images, videos, and audio are all kept in different folders? Some of you guys may be thinking “use multiple <base>
tags to change the base URL” – Sorry, but it does not work that way. Only the first <base>
tag will be registered, and the rest will be ignored; The first <base>
will be “locked” once it is set.
PART 4) OVERRIDING THE BASE TAG
<!-- (A) BASE TAG -->
<base href="http://site.com/images/">
<!-- (B) BASE WILL NOT APPLY TO ABSOLUTE URL -->
<video src="http://site.com/video/VID.MP4" width="256" height="144" controls></video>
<audio controls src="http://site.com/audio/SOUND.MP3"></audio>
The only way to override the <base>
tag is to use absolute URLs.
PART 5) BASE IS MORE TROUBLE THAN HELP
5A) IT WORKS
<!-- (A) BASE TAG -->
<base href="http://site.com/">
<!-- (B) EASY RELATIVE URL -->
<img src="images/IMAGE.JPG">
<video src="videos/VID.MP4" width="256" height="144" controls></video>
<audio controls src="audio/SOUND.MP3"></audio>
Yes, the <base>
tag works. It simplifies the relative URLs to a certain extent.
5B) IT DOES NOT WORK
But let us add on to the story, let’s say that we have a products category page at http://site.com/products/
.
<nav>
<a href="fruits/">Fruits</a>
<a href="toys/">Toys</a>
<a href="books/">Books</a>
</nav>
By now, some of you sharp code ninjas should have already realized the problem with the <base>
. It messes up all the relative URLs.
- The intended URLs here are
http://site.com/products/CATEGORY/
. - But the base changes it to
http://site.com/CATEGORY/
.
Not a big issue, we can just change the URLs to products/CATEGORY/
. But what happens if this navigation menu is dynamically inserted in different pages or even sub-domains? No problem, we can use absolute URLs instead. But the whole point is, <base>
causes more confusion with the URLs. Especially in large projects with dynamic HTML templates.
PART 6) USE SERVER-SIDE SCRIPTS TO MANAGE URLs
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. 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. Can’t go wrong with absolute URLs, you will be happier without the <base>
confusion.
EXTRA 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.
LINKS & REFERENCES
- HTML Base Tag – MDN
INFOGRAPHIC CHEAT SHEET
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!