File Paths

Relative vs. Absolute File Paths

A file path shows where a file exists in your site's folder structure. You can create a relative file path—a path that shows where a file is relative to another file. You can also create an absolute file path—a path that shows a file's position in the folder hierarchy of your site.

If you have little or no experience coding HTML pages, file paths may seem a little confusing at first. In our next section, we'll discuss some basic HTML code and you'll see more examples of file paths. For now, though, just read through this section, see what makes sense to you, and refer back to this page when you find yourself having file-path problems in your code. That is, don't worry too much if this section seems a little abstract; it'll make more sense after you've coded a few things.

Relative File Paths

When you reference a file in your HTML code, you always want to use a file path that's relative to the HTML page. This means that you need to be conscious of the way you're organizing your files so you can determine the file path relative to your HTML page.

You generally create file paths when you want to add images to your page (using an image <img> tag), create links to other html documents (using an anchor <a href> tag), link external CSS formatting files, or include external JavaScript files in your page.

Here's an example of a relative path for an image. Let's say I'm working on a portfolio site. I've named my main folder portfolio. Inside that folder I have an HTML file called artwork.html. That HTML file displays an image of a poster called collage.jpg that's inside a subfolder called img.

To display an image in HTML we use the image (img) tag and set its source (src) attribute to the image's relative file path. To find the image's file path, you trace the file hierarchy from the HTML file to the image file. The top folder is portfolio, my HTML file is one level below the main folder. At the same level is the subfolder img and inside that subfolder is the poster image, collage.jpg. From the perspective of the HTML file, the img folder is at the same level as the HTML file, so I write the file path like this: img/collage.jpg. The full tag looks like this:

<img src="img/collage.jpg" alt="portfolio collage">

(The alt or alternative attribute provides a description of the image.)

Sometimes creating a relative path requires you to move up the file hierarchy. You move up one level by typing in two periods and a forward slash. It looks like this:

../

Here's another example. Let's say you create a subfolder called photographs inside the portfolio folder. Inside the photographs folder you create an html file called photo.html and place all your photographs in an img subfolder inside the photographs folder. If you have a photograph called nature.jpg in photograph's img folder, you can reference that photo in your html page by following the file hierarchy across to the img folder and down to the nature photograph.

The img-tag code inside photo.html looks like this:

<img src="img/nature.jpg" alt="nature photo">

Nothing new there—we've followed a pattern similar to the last example. But what if we need to include an image from portfolio's main img subfolder that's at the same level as the photographs folder, what's the relative path to that upper-level image? Let's say you have a logo icon in the top images folder called logo.png. To trace the path from your html file to that logo, you go up one level in the hierarchy, across to the img folder, and down to logo.png.

This is what the tag looks like:

<img src="../img/portfolio-logo.png" alt="portfolio logo">

Notice the two periods and forward slash at the beginning of the file path—that tells the browser to go up one folder level.

To sum up, you figure out a relative path by looking at your folder/file hierarchy and tracing a path from your html file to the file you want to reference in your web page. You determine the level of each folder and subfolder and see if you need to move across levels, down levels, or up levels. It can seem a little tricky at first, but you'll soon get the hang of it. And you'll know immediately when your file path isn't working—if you load your page in a browser and your image isn't there or your link doesn't work, then most likely your file path is wrong.

Another way to generate relative file paths is to enlist Dreamweaver's help. To let Dreamweaver figure out the file path for you, first set up your site (point Dreamweaver to your site's main folder). Then, create and save your html file somewhere inside your main folder (it can be anywhere in your site, inside a subfolder, inside the subfolder of a subfolder if you want—it just needs to be inside your site's main folder). From Dreamweaver's top menu, select Insert>Image, navigate to the image you want to insert, add a description in the Alternate Text field, and click okay. Take a look at your image tag's src attribute—Dreamweaver's created the relative file path for you. (You can do the same thing with a link, select Insert>Hyperlink, add the link's text, and then click on the Link field's folder, navigate to the html document you want to link, select OK for the link and then OK in the Hyperlink panel. Dreamweaver creates a relative file path to the html document you've linked.)

Absolute File Paths

An absolute file path starts at the root or base folder and works down through the site's folder hierarchy. Use an absolute file path when you're linking to an outside site or embedding media that's hosted on a different site.

Here's an example: Let's say I want to link to an experimental animation hosted on the National Film Board of Canada's website. To link to a particular animation, I'd use an absolute address (there's no way to use a relative address because my site is not part of NFB's site.) When you add an absolute file path to your page, include the hypertext transfer protocol (either http:// or https:// for a secure site), then add the site's URL and any subfolder or parameter that make up the file path. (The easiest way to get the file path right is to navigate to the page you want to link, copy the URL, and paste it into your link tag. Here's what our link to a NFB animation might look like:

<a href="https://www.nfb.ca/film/all_the_rage/">All the Rage</a>

The animation's web page is two folders down from the root—www.nfb.ca—under a subfolder called film that has a subfolder called all_the_rage.

If you see a file path that starts with file:// (on a PC) or /Users/your-name (on a mac), you've likely created an absolute file path to your computer's hard drive. You never want this kind of path in your code—it means your web page will only work when viewed on your computer. Put your website online or even copy it to another computer and the file path won't work because it's specific to the computer on which you made the site.

You sometimes get an absolute file path if you've inserted an image into your web page before you've saved out the page—Dreamweaver doesn't know yet where the file will be saved and consequently it can't generate a relative file path for you. In this situation, just save out the HTML file and Dreamweaver happily creates a relative file path. You might also get an absolute file path if you haven't set up your site in Dreamweaver. Setting up your site directs Dreamweaver to your site's main folder which in turn makes it possible for Dreamweaver to generate relative file paths.

Now you're ready to learn about the basics of HTML.