In this section, we will learn how files and their path (address) can be represented in an HTML document.

Path in HTML: What is File Path in HTML?

Everything you see on the internet is nothing but a file on a server that you’ve set its address and got that file as a result. Basically, by typing the address of that file, your browser sends a request to the server that owns the file and asks for a copy of that file to be sent back.

In short, everything on the internet has an address, and we call them file path. For example, when you type the address https://www.google.com/ you’re basically sending a request to the Google servers asking for the homepage file of this website. The server thus sends back this homepage file.

HTML elements like <script>, <a>, and <img> elements also have attributes like `src` and `href` that take the address of a file and then load that file in an HTML document.

Alright, now let’s move on and see the type of file path or addresses that we can put as the argument of these attributes.

Types of File Path in HTML

In short, there are two types of URL address that we can use to access a file on the internet.

• Absolute Path
• Relative Path

Absolute Path in HTML:

An absolute file path is the one that contains the protocol, the name of the website, optionally the port number and the directory in which the target file is in and, of course, the filename itself.

For example:

https://www.enjoytutorials.com/html/html-file-path-tutorial

This is an absolute file path because it has the protocol (which is https), the website address (www.enjoytutorials.com/), the directory in which the file is in (html) and the filename itself (which is html-file-path-tutorial).

We mainly use absolute paths when asking for an external resource that is from another website. For example, if this website (www.enjoytutorials.com/) wants to ask another website like www.bing.com for a file, then we need to use an absolute path! Otherwise the browsers won’t know what website (server) the request should be sent to!

Example: using absolute path in HTML

See the Pen using absolute path in HTML by Omid Dehghan (@odchan1) on CodePen.

Relative Path in HTML

On the other hand, we have relative file paths. This type of addresses doesn’t need to be prefixed with a protocol and a website address!

They are mainly used when we want to access a file on the same website!

Let’s say we have a website about cars. The file directories of this website on our server are like this:

Every page and every image on a website has a URL (or Uniform Resource Locator).

As we mentioned earlier, the URL is made up of the domain name followed by the path to that page or image.

The path to the homepage of this site is ww.host-name.com/index.html. The path to the picture of Ferrari Laferrari car in this site is www.host-name.com/images/ferrari/ laferrari.

Relative URLs can be used when linking to pages within your own website. They provide a shorthand way of telling the browser where to find your files.

When you are linking to a page on your own website, you don’t need to specify the domain name. You can use relative URLs which are the shorthand way to tell browsers where a page is in relation to the current page.

If your site is organized into separate folders (or directories), you need to tell the browsers how to get from the page it is currently on to the page that you are linking to.

The directory of the imaginary website mentioned above contains:

1. The root folder which is www.host-name.com contains:

• A file called index.html which is the homepage for the entire site.
• A directory called ‘images’ which contains all the images of the site.
• Another directory called ‘reviews’ which contains 2 html files, each about reviewing one car brand.

1. Inside the “images directory” we have 2 sub-directories
2. The first sub-directory is “Lamborghini” which contains pictures of Lamborghini cars
3. The second sub-directory is “Ferrari” which contains pictures of Ferrari cars

3- Inside the “review” directory we have two files, the first one is a review of the Lamborghini brand car and the second is a review of Ferrari brand car.

Now let’s say we are currently at:

www.host-address.com/reviews/Ferrari-reviews.html

We want to use a link to go to “Lamborghini-reviews.html”.

Using relative-URL, and because “Lamborghini-reviews.html” is in the same folder as Ferrari-reviews.html, we can create a link like this:

<a href= “Lamborghini-reviews.html”> Lamborghini-reviews</a>

As you can see, there’s no directory or host-address at the beginning of the address of this URL within ‘href’ attribute.

So the rule number one when using Relative-URLs:

If the target page is in the same directory as the current page you are in, then just put the name of that page/file in your link.

Now let’s say we are still at www.host-address.com/reviews/Ferrari-reviews.html and we want to see the picture of Lamborghini Uros.

According to the directory of this website, this picture is in /pictures/lamborghini/Uros.png .

This means the file is not in the same directory as the page that is currently loaded. So now we should go out of current directory “reviews” and move to “images/lamborghini/” directory. This means going backward at one level of the current directory.

Rule number two:

Using Relative-URLs, if we want to move back from the current directory to the root, we use three dots like this … (Note that every time we use the triple dots; it means only leave the current directory and move back to the previous one).

So going from Ferrari-reviews.html to Uros.png would be:

<a href="…/images/lamborghini/Uros.png">Lamborghini Uros</a>

Using … we got out of “reviews” directory and entered the root directory.

Then we moved to images directory using …/images.

The next directory, which was …/images/lamborghini.

And last, the file that we were looking for: …/images/lamborghini/Uros.png

Note: the more you want to go back, the more you need to use “…”

For example, in order to go 2 level backward: …/…

Or in order to go 3 directories back, we can use: …/…/…/

Now, let’s say you are in images directory of our imaginary site and want to access to the Aventador.png picture.

Because this picture resides in a sub-directory within the image-directory, all you have to do is to name the directory without any ‘/’ or ‘host-name’ or the current-directory.

Example:

<a href= "lamborghini/Aventador.png">Lamborghini-Aventador</a>

Rule number third:

If the target page is in a sub-directory below the current directory that you are in, then just set the name of that directory (no need for ‘/’) followed by sub-directories (if any) followed by the file-name.

Last, let’s say we are now in this directory:

www.host-address.com/images/lamborghini/Aventador.png and we want to go back to the homepage.

In order to get back to the homepage, we need to go backward two times (because we are two directories down from the homepage)

We know that using … we can move backward “ONE level” from the current directory. So if we want to go backward more than that, all we have to do is to use …/…/.

Example:

<a href= "…/…/">Homepage</a>

Note: in case of the home page, you can also put the `/` as the value of the `href` attribute and that means we want to get the homepage. So no need for the triple dot operator.

Don’t forget: A relative file path points to a file relative to the current page.

Relative Path vs Absolute Path

An absolute path uses the protocols and website address within the specified URL. We mainly use them when the target file is on another website! So we need to tell browsers the address of that website, otherwise there’s no way for it to know where to look for the file.

On the other hand, a relative path, or URL, is the one that only takes the directory and the file name. This is especially helpful when we are looking for the file on the same website! So there’s no need to specify the website’s name.