Relative vs Absolute URL's

Let's understand the difference between relative and absolute URL's

first published: 15/03/2023

Suppose you have a directory where you keep your website files. Let's call it "my-site". Inside of that directory, you have a file called "index.html" which contains the root HTML document. Within that HTML document you want to link to another page called "Example", and that HTML document is in the same directory as your index.html file. Your directory structure looks like this:

      
      my-site
      ├── index.html
      └── example.html
    
  

How do you create a link that points to this file? There are 2 ways you can do it: relative and absolute paths. Let's look at the relative way first. In your index.html file, you would write something like this:

or you could write it like this:

Both of these are using a relative URL. The first one is a shorthand for the second one. The "./" is a shorthand for "the current directory". So, the first example is saying "go to the current directory and find the file called example.html". The second example is saying the same thing, but it's more explicit.

So what is it actually relative to? Well, it's relative to the file that contains the link. So, in this case, it's relative to index.html. If you were to move the index.html file to a different directory, the link would not work anymore. So, if you moved it to a directory called "pages", the link would break. If your new directory structure looked like this:

  
    my-site
    ├── pages
    │   └── index.html
    └── example.html
  
  

Then the link would break. So, you would have to change it to:

      
        <a href="../example.html">Example</a>
      
    

The "../" is a shorthand for "the parent directory". So, the link is now saying "go to the parent directory and find the file called example.html".