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.
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
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
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!