html – Difference between absolute and relative URLs in page contents

Question:

The contents of the page can be requested by entering a complete URL, relative or relative to the root of the place where our base file is located (generally index.php or index.html ):

Complete

<script src="http://www.meusite.com/assets/js/script.js"></script>

Relative

<script src="assets/js/script.js"></script>

Root related

<script src="/assets/js/script.js"></script>

Question

Is there any practical difference in terms of page efficiency between using any of the three options we have at our disposal?

Of course we have a reduction in the amount of code, but beyond that…

Answer:

Short answer

It makes no difference as the browser optimizes and calls to the same place. The main difference is the one you mentioned, in the amount of bytes in the HTML file.


long answer

The main use is to save bytes in source files, but there are some other uses depending on the relative URL type. basically there are three of them:

  1. URL relative to where the current file is

    Ex.:

     <a href="menu2.html">menu2</a>

    Here you are accessing a file in the same directory as you are.

     <a href="../../teste/menu2.html">menu2</a>

    Here you are accessing a file two levels before the directory you are in.

  2. URL relative to the server (full domain) the current file is on

    Ex.:

     <a href="/menus/menu2.html">menu2</a>

    Here you are accessing another file from the site root.

  3. URL for the current protocol

    Ex.:

     <a href="//outrosite.com.br/pagina1.html">link em outro site</a>

    Here you are accessing another website using the same protocol. This case is often used to maintain compatibility in the use of HTTPS and HTTP and ensure that all accesses are on the same protocol, regardless of the way the user initially accessed the site.

Scroll to Top