Understanding HTML File Paths & How to Use Them

When creating a website, you need a way to access files and resources. These files can either be local (inside the website folder structure) or external (from an address on the Internet).

With local files, placing them in separate folders is best to ensure the separation of concerns and modularity of your code. For files located elsewhere, you need an equally efficient way to reference them. File paths ensure that you can access these resources.

In this article, we’ll explore different HTML file paths, including comparing relative and absolute file paths, as well as the best practices for using file paths in HTML. Finally, we’ll look at some use cases and examples to learn about their syntax.

What is an HTML file path?

An HTML file path is the location or address of a particular file resource. In cases where you want these files to communicate or link to one another, you need to provide a file path so that the browser knows and understands how to access them.

HTML file paths are useful because without them, there’s no way of introducing or referencing dependencies required for a fully functional website. These dependencies include JavaScript code located in a separate file — needed for a checkout functionality when a button in the HTML file is clicked — or even simply referencing a video resource from an external site.

Relative vs Absolute File Paths

To make use of HTML file paths, the two options are either relative or absolute file paths. With relative file paths, the files you intend to reference are located in the same folder of your website folder structure. On the other hand, with absolute file paths, you refer to external resources located elsewhere on the web.

Using absolute file paths, we can access a file content or resource with their full URL path, which means you can also reference content directly from the web. For example, you can refer to an image from a URL like:

The src is also known as the source attribute, which tells us the file path.

Alternatively, with relative file paths, the file path references a file relative to the current working location or file in the folder structure. For example, say you  have a hub.jpg file in the images folder, one level up in the folder hierarchy. You can easily access it like this: <img src="../images/hub.jpg">. The first period represents the current directory, and the next period moves one level up the directory structure.

For relative file paths, to link to a particular file in the same folder you would use the file name alone, such as hub.jpg. To refer to a file located in a nested images folder, all you need to do is write the name of the folder in front of the path and a forward slash: images/hug.jpg.

It’s best practice to use relative file paths, as they are local to the folder hierarchy of your project and always remain the same. In contrast, absolute file paths may be located anywhere on the Internet and can change at any time, potentially leading to broken links.

With relative file paths, care must be taken regarding how you reference these files, the spellings of the file names, their location, file extension, and so on. This is so that you can ensure that the resource loads properly. For absolute file paths, the URL must be valid and contain the needed resource for the web page to load appropriately.

Also, with relative file paths, images (for example) have to be loaded over the Internet. In some cases, it might take large images some time to load, which can lead to slower websites. Therefore, if you no longer have to depend on an external URL, it’s advisable to use relative file paths over absolute file paths wherever possible.

HTML File Path Example

As mentioned earlier, HTML file paths can either be in the form of relative or absolute paths. In this section, we’ll explore some examples of using both types of file paths so that you can understand their syntax and how to use them in real-life scenarios.

First, let’s demonstrate how you can reference an image file or resource inside an HTML document using its relative path. Go ahead and launch your code editor, create a new file, and call it index.html. Add the code below inside the file you’ve just created:

Next, download the sample image (sample-image.jpeg) and add it to the same location as the current HTML file directory.

In the HTML file above, inside the body tag we’re referring to the image file with the source (src) attribute, which tells us where the image is located. When you open the HTML file, the output should look like this:

Moving forward, let’s explore how an absolute file path works in an HTML document.

In the example below, you'll import a hosted CSS and JavaScript code into your HTML file. To begin, create a new index.html file and add the code below:

When you open the HTML file, the output should look like this:

You’ve now successfully used Bootstrap CSS and JavaScrip hosted somewhere on the Internet to link to an HTML file and display a custom primary button. 

Finally, let’s demonstrate how you can include a JavaScript file located in the same folder hierarchy as your HTML file by using the script tag with the src attribute.

First, create a new index.html file inside a folder named tut and add the code below:

Next, create a js folder. Inside this folder, create a file: sample.js. Inside sample.js, add this code below, which prints “Hello world” to the browser when the button is clicked on the page.

If you open the HTML code on the browser and click the button, the output should look like this:

As you can see from the example above, the value for the src attribute is the relative path to where the JavaScript file is located in your system path concerning the current working directory. In our case, it’s located inside the JS folder. See the folder structure below:

Using HTML File Paths

In this article, you explored HTML file paths and how they work. HTML file paths ensure that you  can access resources or files based on their location, regardless of whether it is local to your website folder structure or from other locations on the Internet.

With absolute and relative paths, care must be taken when referring to these file locations so that the browser understands how to access them. Usually, files placed relative to the HTML document offer the best approach because their location is static.

Additionally, always ensure to use the alternate attribute, which provides a fallback mechanism if the resource location changes or the file is improperly referenced.

Now that you know how HTML file paths work, you can use this knowledge to make informed choices about when to use relative or absolute file paths.