HTML File Paths | Learn HTML

Understanding HTML file paths is very important in website development. It describes the location of a file which is linked to the web page.

In this tutorial, you will learn about HTML file paths and how you can link different files to your website.


What is HTML File Paths?

A website is a combination of different types of files. Like HTML, CSS, JavaScript, image, videos etc.

How all these files work together?

In order to work together, they have to be interconnected. Here HTML file paths come into play.

They are used to link files that are present inside the website folder or from outside sources.

You already have used file paths to link images in our HTML Images tutorial.

HTML file paths are not only used to insert files, we use them to create internal and external links in a web page.

It mainly shows the web browsers where the file is located so that browsers can find and display it in front of the users.

There are two types of file paths used in HTML:

  • Absolute File Paths
  • Relative File Paths

HTML File Path Examples

File Path Description
<img src=”img.jpg”> img.jpg file is located in the same folder as the current web page.
<img src=”pictures/img.jpg”> img.jpg file is located in the pictures folder in the current folder.
<img src=”/pictures/img.jpg”> img.jpg file is located in the pictures folder at the root of the current website.
<img src=”../img.jpg”> img.jpg file is located in the folder one level up from the current folder.
<img src=”../pictures/img.jpg”> img.jpg file is located in the folder one level up from the current folder and also inside the pictures folder.

Learn more <img> tag and how to add images, in our tutorial – HTML Images


Absolute File Paths

An absolute file path describes full URL of a file.

This type of path always contains root of the file system or domain name of the file that we are linking to.

Absolute file paths are used add something from any outside sources or to create links to other websites.

<img src="https://worldtechis.com/wp-content/uploads/2019/02/Programming.jpg" alt="Programming">

The output shows in a web browser:

Programming

Relative File Paths

A relative file path defines a file, which is relative to the current web page.

They don’t contain full URL of the path. These types of paths are used to add something from inside the current web directories.

You can define relative paths in various ways:


File in The Same Folder

If your file is stored in the same folder as the current web page, your relative file path will be just the file name programming.jpg.

<img src="programming.jpg" alt="Learn Programming">

The output shows in a web browser:

Programming
file in the same folder-html file paths

In this example, main web page file is “index.htmland the image file “programming.jpg” is located in the same folder.

If you don’t know about a web page setup, you will learn everything in detain, in our tutorial – HTML Setup


File in The Different Folder

If your file is stored in another folder like “images” folder located in the current folder, your relative file path will be images/programming.jpg.

<img src="images/programming.jpg" alt="Learn Programming">
file in different folder-html file paths

In this example, image file is located inside of another folder “images”. The web page file and this folder both are in the same directory.


File is The Root of Current Web

If your file is stored in the “images” folder located at the root of the current web, your relative file path will be /images/programming.jpg.

<img src="/images/programming.jpg" alt="Learn Programming">

In this example, your image URL is https://yourwebsiteurl.com/images/programming.jpg

Here, the path /images/programming.jpg indicates the relative path located at the root of the current web.


File is Located in The Folder One Level Up

Your file may store outside the folder where your current web page is located. In this case, you have to go one level up or you have to come out from current folder to grab the file.

The sign used to indicate one level up is ../ . This sign tells web browsers to go one level up.

<img src="../programming.jpg" alt="Programming">
file in one level up-html file paths

In this example, image file is present outside the “web page” folder, where main web page is located.

Here, ../ this sign is telling the browser to come out from the folder and show the image.

<img src="../images/programming.jpg" alt="Programming">
file in one level up in another folder-html file paths

In this example, image file is present outside the “web page” folder as well as inside of another “images” folder.

Note: you can use that sign multiple times consecutively if you need to come out from multiple folders in order to grab the file.


Absolute VS Relative Path in HTML

These two types of file path are different in characteristics with different use case. Here are some important differences between them:

  • Absolute file path uses full URL but relative path uses file structure i.e. folder and file names.
  • Absolute path is mainly use to add files from outside sources but relative path can only insert from current web directories.
  • You can create outbound links or external links using absolute path. Relative path is used to create internal links.
  • Absolute file path does not work if domain name or website URL changes. But relative file path works with any domain.

Which one you should use

Both HTML file paths have their own usages. If you link to another website, you must use absolute path.

Otherwise, it is best practice to use relative file paths as much as possible.

Main drawback of absolute file path in case of internal linking is your links will not work if you change your domain name for any reason.

In this case, you have to change all of your internal links to the current domain name. That would be very painful and time consuming.

However, internal links using relative file path will work as it with the new domain name.