What are relative URLs vs absolute URLs?

In the Jubilee Austen project, we are linking to some images and stylesheets that are in our project directory. For instance:

<img src="img/icon-html.png" alt="HTML icon" />

Notice that the image src is "img/icon-html.png." This is called a relative URL, and the file path is in relation to the location of the file you are writing in.

Ideally, we have the project directory set up like this: 

my-site  (folder)
|____ index.html
|____ css  (folder)
         |____ main.css
         |____ normalize.css
|____ img  (folder)
         |____ (all of your images)

To create the path, think about how you would click through your site folders. If we are are starting from the index.html file, we would be in our "my-site" folder. First we'd need to click on the "img" folder (the "img/" part of the path) that is at the same level (in this case the root level) as the index.html file. Then we would click on the file called "icon-html.png." And there is our path!

What about links to the stylesheets:

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

Same idea! Go into the "css" folder (the "css/" part of the path) that is at the same level (in this case the root level) as the index.html file. Then look for the file called "main.css."

What if we are inside a folder and referencing a file in another folder? Like calling for an image from the main.css stylesheet. You will need to tell the site to go up a level (in this case, back to the root) to get to the img folder, where your images are. To do so, you'd add ../ to the front of the URL, so:

		background: url('../img/full-background.png');

Relative URLs are great because they don't need to be changed when you upload your site files to a live server. The relationship doesn't change, so the URL doesn't need to change!

But be careful! If the path changes in any way (if you change the folder name or move things around) or you have any typos (like listing the wrong extension or file name, etc.), your site won't know where to find those linked items.

On the other hand, we have absolute URLs, which point to a specific path. That path could be a web page (like "https://skillcrush.com/") or to a file on your computer (like "C:\Users\Skillcrush\My Documents\Sites\my-site\img\icon-html.png"). We don't want to use absolute URLs to point to directory files because they are much longer (super annoying to type!) and won't work on a live site (because, luckily, the internet won't have access to the files on your computer; which is a VERY good thing!).

Here is a link that goes into more detail if you’re curious.