All About File Paths

by kirupa   |   4 September 2014

In your HTML and CSS documents, you 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 you 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:

a file path

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

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 you will run into. To help visualize this, we'll refer to the following file and folder structure:

File and folder paths

The root of your 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 your 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:

simple reference

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 Parent Directory

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

referencing a file in a folder

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. To generalize this, referencing files up the hierarchy is basically made up of a series of folder names separated by a slash until you reach the file you are interested in: folder1/folder2/folder3/file_i_want.gif

Referencing a File in a Child Directory

Just like you can reference up, you can also reference down through the children. For example, in this case, you are in default.css and you are specifying icon.png as a background image inside a style rule:

referencing something in a child

The path inside this style rule would look as follows:

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

To go down your hierarchy by one folder, you specify the ../ characters. The more of these you string together, the further back you you go: ../../../someFile.png.

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:

default_to_dancing_banana

While this looks tricky, it is nothing more than you going down the tree and going back up:

#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, you just walk back up to where you need to go. This approach is simply a combination of both of the approaches you've seen so far.

Working from the Root

All of the approaches we've seen so far reference files using what is known as a relative path. They are called that way because the file path you specify depends entirely on where your HTML or CSS document lives. If you move your HTML or CSS document around, you will more than likely need to update the number of ../ or folderName/ entries your file path contains to reflect the new co-ordinates.

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, it doesn't matter where default.css lives or where it gets moved to. The path to dancing_banana.gif will remain unchanged. There is a name for a path that always starts from the root, and that is an absolute path. No matter where in your project structure your HTML or CSS files live, your reference to resources from inside them will always start at the root and never change.

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("//www.kirupa.com/images/dancing_banana.gif");
	background-repeat: no-repeat;
}

The end result is identical to what you had using just the / character, but this approach allows you to reference files located outside of your own site should you need to.

Protocol Relative URLs

Your content will commonly be viewed either in HTTPS or HTTP. Unless you are doing something really secure, chances are you are going to be in the HTTP bucket:

why aren't you secure

All of this doesn't really matter...except when you are loading resources and crossing the streams between a HTTP and HTTPS location. For example, if you are on a page, served securely via HTTPS, that is trying to load something from a HTTP location, your browser will probably cringe a little:

problem

The way to avoid this issue is to remove the protocol altogether and provide what is known as a protocol relative URL:

<img src="//www.blah.com/foo.png">

Notice that this URL doesn't contain either a HTTP or a HTTPS at the front. It adopts whatever protocol the page is on to ensure that all resources are loaded consistently. This means if you are trying to access this image from a HTTPS location, the path will be treated as if it were actually https://www.blah.com/foo.png.

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:

  1. If the resource I want to reference lives on a different domain, the only option is to use a fully qualified absolute path (ie: //www.kirupa.com/logo.png).
  2. If the resource I want to reference lives inside a server-side include or template, predicting where the file path will show up can be tricky. In these times, I use a normal absolute path (ie: /images/foo.png).
  3. If I am on a secure page served via HTTPS, any external resource fetch should use a protocol relative URL (ie: //www.foo.com/script.js).
  4. 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. Also, a shout-out to Kyle Murray (aka Krilnon) for reminding me about protocol relative URLs when looking at an earlier draft of this.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!