Scribd
Upload
23 views6 pages

Relative Vs Absolute File Paths

Relative vs Absolute File Paths in HTML

Uploaded by

Ayman Nabil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views6 pages

Relative Vs Absolute File Paths

Relative vs Absolute File Paths in HTML

Uploaded by

Ayman Nabil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Relative vs Absolute File Paths

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:

HTML
img src="https://www.hubspot.com/images/hub.jpg" alt="hub"
Copy

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:

HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML File Path Example</title>
</head>
<body>
<h2>HTML File Path Example</h2>
<img src="sample-image.jpeg" alt="Image File path example">
</body>
</html>
Copy

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:

HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Button Example with Relative Path</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min
.css" rel="stylesheet">

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundl
e.min.js"></script>
</head>

<body>
<div class="m-4">
<button type="button" class="btn btn-primary">Primary</button>
</div>
</body>
</html>
Copy

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:

HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/sample.js"></script>
</head>

<body>
<h1>HTML File Path Example with JS</h1>
<form>
<input type="button" value="click" onclick="sayHello()" />
</form>
</body>
</html>
Copy

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.

JS
function sayHello() {
alert("Hello World!");
}
Copy

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.

Prepared by:

Ayman Nabil Abdullah Saeed

You might also like