HTML File Paths – Absolute vs Relative URLs
Understanding the file path of your web project is going to be extremely important to developing your skill set as a web developer. A file path describes the location of a file in a website’s folder structure.
Getting your file path correct is important because it will determine how you link to pages, documents, images and files in your website or another website.
Here are some examples:
<a href="about.html">About Page</a>
The code example above demonstrates a link to the About Page that’s in the same folder as the current page.
<a href="pages/services.html">Services Page</a>
The code example above demonstrates a link to the Services Page that’s in a folder called pages which is in the current folder.
<a href="/img/photo.jpg">Photo</a>
The code example above demonstrates the location of the Photo being in the IMG folder that’s located in the root directory of the website.
<a href="../contact.html">Contact Page</a>
The code example above demonstrates the Contact Page being located one level up from the current folder.
If you are familiar with the Command Line, you will often see a single . or two ..
What this means is that the single . is the current folder and the double .. is the level above.
Absolute File Paths
An Absolute File Path is the full URL to an asset on your website.
<img src="https://www.example.com/image.jpg" alt="Image of Something">
Relative File Paths
A Relative File Path points to an asset, relative to the current page.
<img src="/img/photo.jpg" alt="Photo of Something">
When Should You Use Absolute or Relative file paths?
Let’s break it down like this, if you are linking to content on your website, it’s often best to use a Relative file path. If you’re linking to an external source or website, then use an Absolute URL.
When it comes to server side programming, you can dynamically set a default path and use a function to reference it but that’s for another tutorial.