What is the difference between absolute and relative URLs in page contents

In this article we will learn the difference between absolute and relative URLs on our sites, for example when we put the URL of a CSS instead of the path.

What’s up programmer, ok? Does it make a difference to insert the URL or the path of the folder when we call external files? Let’s see this now!

See examples of situations:

<!-- Absolute -->
<script src="https://www.site.com/src/js/scripts.js"></script>
<!-- Relative -->
<script src="src/js/scripts.js"></script>
<!-- Relative from root -->
<script src="/src/js/scripts.js"></script>

In fact, there is no difference in calling files in any of these ways.

The browser optimizes the calls in the way that is most interesting for both, the application and the client who is accessing the site.

File size

However, as you may know, with each character written in a file, its size increases.

The larger the file, the longer it takes to be interpreted and executed.

That is, the larger ways of calling a file will imply a larger file and consequently slower to be read.

Of course, at this level it shouldn’t have much impact, but it’s good to be careful

Maintenance

If you put absolute URLs, every time you change the domain, for example, you also have to remember to change the file call

Then maintenance costs start to increase, so the relative URL is the best case for less code maintenance

Global relative URLs, which go from the root, tend to save time in maintenance.

Once hardly a project will change its folder structures, even more after it is in production and the whole team with the project on their machines

Conclusion

In this article we learned the difference between absolute and relative URLs when calling files to the project

In practice it does not imply anything for the client, he will receive the file in the same way

However, we saw that using absolute URLs is a bad practice, as it increases the occurrence of maintenance and also the size of the HTML file.

Want to learn more about web development? Click here!