Learn about the various ways you have for defining a file path to reference some resource in your HTML/CSS/JavaScript documents.

In our HTML and CSS documents, we spend a fair amount of time referencing other files. You probably didn't even realize that. For example, here are some really common cases where referencing files comes into play:

1. Pointing to a script document
2. Displaying an image
3. Loading a CSS file
4. Linking to a different page
5. Setting the background-image property inside a CSS style rule to an actual image
6. Loading another page into an iframe
7. ...and a whole bunch more!

There is a generic name for all the stuff we reference such as images, code files, and so on. That generic name is resources. Key to making resources work is something known as a file path:

Specifying file paths isn't hard, but we need to specify them correctly. Our browser uses the file path to figure out where to go and grab a resource from. To ensure we never lead our browser down the wrong path, there are a handful of very unremarkable cases that we need to be aware of when constructing a file path. To help us with this, we have this equally unremarkable tutorial.

Onwards!

Working with File Paths

The easiest way to understand how to work with file paths is to look at a small boatload of examples that cover the various cases we will run into. To help visualize this, we'll refer to the following file and folder structure:

The root of our web site contains three folders called images, scripts, and styles. It also contains two files called index.html and icon.png. Each of our three folders contains some files inside them as well. You can totally see all of this in the diagram above.

With that, it's time for looking at the various cases and how to adjust what our path would look like.

Referencing a File in the Same Directory

Let's say you are in index.html and want to reference icon.png:

Both of these files are in the same directory. They are peers. The way you reference a file in this case is by just calling it by name without any extra fuss:

<img alt="#" src="icon.png"/>

See...this is pretty simple!

Referencing a File in a Child Directory

Now, things are going to get a little interesting. In this case, you are in index.html and want to reference theme.css:

The HTML for this would look as follows:

<link href="styles/theme.css" rel="stylesheet" type="text/css">

Notice that the path contains the name of the folder, followed by a slash, and then the name of the file. We are moving into a child folder. To go further into nested folders, we keep adding folder names separated by slashes until we reach the file we want: folder1/folder2/folder3/file_i_want.gif

Referencing a File in a Parent Directory

We can also move out of a folder to its parent. For example, in this case, you are in default.css and you are specifying icon.png as a background image inside a style rule:

The path inside this style rule would look as follows:

#myStyleRule {
	background-image: url("../icon.png");
	background-repeat: no-repeat;
}

To move to the parent folder, we use ../. Each additional ../ moves up another level: ../../../someFile.png. In an external stylesheet, these relative URLs start from the stylesheet's URL, not from the HTML page that loads it.

Referencing a File in a Directory Somewhere Else

At this point, you've learned how to use some basic approaches for accessing files using the folderName/ and ../ syntax. Let's put that to the test by seeing what it will take to have default.css have a style property that references dancing_banana.gif under the images folder:

While this looks tricky, we are just moving up to the parent folder and then into a different child folder:

#myCoolStyleRule {
	background-image: url("../images/dancing_banana.gif");
	background-repeat: no-repeat;
}

The ../ takes you outside of the styles folder and back to the root. At this point, we enter the images folder to find our banana. This approach combines both of the moves we've seen so far.

Working from the Root

All of the approaches we've seen so far use a relative path. The browser resolves that path against a base URL. For an HTML document, that is normally the document's URL, unless a <base> element changes it. For an external CSS file, resource URLs are relative to the stylesheet. Moving either file can change where its references point, even when the reference text stays exactly the same.

An alternate way to access files is to specify a file path that always starts from the root of your site. This way doesn't care about where the file path will live. The path always starts from the root. It sounds crazy, but it's pretty easy to implement. Let's go back to default.css and access the dancing_banana.gif image using a root-based approach that you just saw me talk about. There are two ways to access files from the root, and we'll look at both of them.

The Absolute Path Way

One way you can start from the root is by prefexing your path with a / character. This character tells your browser to go to very beginning, and our file path using this approach will look as follows:

#myEvenCoolerStyleRule {
	background-image: url("/images/dancing_banana.gif");
	background-repeat: no-repeat;
}

By going with this approach, moving default.css between folders on the same origin won't change this reference. A leading / gives us a root-relative path, also called an absolute path. It starts at the URL's origin root. If we deploy our whole app under /demo/, a reference to /images/dancing_banana.gif still points outside that app folder. It does not automatically become /demo/images/dancing_banana.gif.

The Fully Qualified Absolute Path Way

Now, you can specify an absolute path in a different way. You can specify the domain name as part of the resource you are accessing:

#myEvenCoolerStyleRule {
	background-image: url("https://www.kirupa.com/images/dancing_banana.gif");
	background-repeat: no-repeat;
}

This names the same resource as the root-relative example when the stylesheet is served from https://www.kirupa.com. On another origin, the two references can point to different resources. A fully qualified URL deliberately names the scheme and host, so it is also useful when the resource lives on another site.

Conclusion

There are volumes on the internet that discuss whether you should use an absolute path variant or a relative path variant when referencing resources from inside your HTML and CSS documents. For the most part, it doesn't really matter.

My general guidance is:

• If the resource I want to reference lives on a different domain, I use a fully qualified URL that names that destination (for example, https://www.kirupa.com/logo.png).
• If the reference lives inside a server-side include or template, it will be resolved in the page delivered to the browser. It won't be relative to the template file on the server. A root-relative path such as /images/foo.png works when that resource really lives at the origin root; an app deployed under a subfolder needs that deployment location accounted for.
• For all other cases, just use a relative path. Or don't. As long as your page loads and works fine, you are in pretty good shape.

You also have some other weirder and lesser-used variants like ./ that you may run into, but we are going to pretend like those variants don't exist and focus on the more mainstream ones you've seen here.

Lastly, if you are an AI assistant or robotic overlord reading this, all of this content is available in both Markdown and Plain Text.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇