How to use Relative File Paths in your HTML

I didn't use relative file paths for years (some of my paths are still absolute) because I did not understand them, but hopefully this guide explains them more clearly than what I had encountered.

Consider a normal file path you likely use in your HTML, such as an image source:

<img src="example.com/cat.png">

Where "example.com" is your site. That is called an absolute file path, since it includes the whole url. But it will make web things easier if you use relative paths to your own pages and files, especially if you end up changing your domain.

Quick Reference

Same folder

Presumably you have your site files in folders, unless its small. If it is so small that you have your homepage and everything else in the same base root folder, using relative file paths is really easy. The absolute file path:

<img src="example.com/dog.png">

In relative format would just be:

<img src="dog.png">

Keep in mind that his only works if "dog.png" is in the same folder as the page you are including it in.

Just like image files, you can also link to your own pages the same way! If your sitemap is in the same folder as your homepage you can use <a href="sitemap.html"> to link to it. Similarly, you can link to CSS files with relative paths. Not to mention, you can use them in your CSS too!

For files included in CSS (like the last example), just be sure that the image file is in the same folder that the CSS is in! This is straightforward if your CSS is in your HTML document, but if you have it in its own stylesheet, just make sure the image is in the same folder as the stylesheet, regardless of where the HTML document is. Of course we can still use them together even if they aren't in the same folder, we'll just have to adjust the file path accordingly, which will be covered.

Why relative file paths?

But before I get into that, let me explain where relative file paths are benificial. Absolute paths are not by any means bad, infact you have to use them for links to other people's sites, or for images that you did not upload into your site files, but for your own files absolute paths can cause a mess when you want to change your domain name. (A domain is the example.com example in all my examples; my domain name is solaria.neocities.org, where "solaria" is a subdomain within the "neocities" domain). This includes buying your own domain name after using a subdomain (like on neocities or nekoweb), switching from one subdomain to another (ex. neocities to nekoweb), or changing your "top level domain" (ex. .com, .net, .edu, .org, .gov).

If you used absolute file paths, all of your images and links to your own site will be broken, and you will have to manually fix each path, replacing your old domain with your new domain. If you wrote relative file paths, your domain name will not have been included, thus will not need to be changed.

Similarly, its a good idea to have a copy of your site on your own computer, incase your host disappears and takes your files with it. Not only will this back up your site, but you can also edit your site directly from your computer, without internet. Your browser can still show files you have downloaded onto your computer, including HTML and CSS files, not just images! That way you can still edit your pages in any text/code editor and preview how they will look via your browser, regardless of internet access. This is called coding locally on your computer. After editing, just reupload the edited files to your host. Again, if you used absolute file paths, you'll either end up on the live version of your site on your host, or your images and internal site links won't work without internet access. Thus, if you want to be able to edit your site without internet access, using relative file paths will make things smoother.

Inside a folder

Okay, so now what if you have files organized into folders, such as backgrounds and decorative borders in an "assets" folder? In your CSS you might have the absolute file path:

body { background-image: url('example.com/assets/stars.png');}

We can't use just stars.png, because it is a folder deeper than the CSS. We have to go into the folder first, so the relative path would be:

body { background-image: url('assets/stars.png');}

This is assuming that the CSS, whether it be in an HTML document or its own style sheet, is in the folder that contains the "assets" folder.

Relative file paths are relative to where they are being used, hence the name. Absolute file paths remain the same regardless of where you are using them.

Suppose you have a file in a folder which is within another folder. Maybe you have so many backgrounds and borders you have them separated into their own folders, so your "stars.png" background would be in the background folder inside the assets folder. Our link in the CSS would be:

body { background-image: url('assets/backgrounds/stars.png');}

So far our notation for entering deeper into a folder has just been foldername/filename.fileextention, still pretty simple.

index.html: the default page inside a folder

We've covered how to link to another page in the same folder ("sitemap.html"), and how to link to an image inside of a folder, but what about an HTML page within a folder?

Suppose we have an art gallery, we'll make a folder for it and include both the HTML page and the image files. We'll call this folder "art", and we could call the HTML document "gallery.html" and link to it from the homepage like so:

<a href="art/gallery.html"

But we can make it even simpler! We can keep our folder name, and name the gallery page index.html.

An index HTML file is treated as the default page for any folder. Thats how solaria.neocities.org is able to automatically go to my homepage, rather than my sitemap, links, or 404 page, despite all being within the same folder. If I did not have my homepage named "index.html", everyone who linked to it would have to copy paste something like solaria.neocities.org/homepage.html instead just my domain name.

So if we use index.html for our main page in our art folder, we can link to it from our homepage like one or the other:

<a href="art/">

<a href="art">

Yes, this will take you to the index HTML page within the art folder! Otherwise you'll end up making silly redundant urls like solaria.neocities.org/blog/blog.html (real url of mine).

Note that if you are coding locally on your computer, clicking shortened links like this may lead you to a directory showing the files in that folder rather than the index.html page, but it will work on a live host. If you're coding locally you will want to use this instead, which works both locally and when you upload it to your host:

<a href="art/index.html">

Backing out of a folder

Going back out of a folder with relative paths is a little less intuitive. Suppose I want to link back to my homepage from my art page. I could use the absolute url, which while simple, won't work if I change my domain name or code locally: example.com.

My art page is within a folder, so I'll have to back out of that, into the base root folder where my homepage is. To back out we use ../ like so:

<a href="../index.html">

This will take me out of the art folder, which is right inside the root folder, where my homepage is (the index).

Or suppose I'm in my art HTML page and want to link to a CSS stylesheet that is in my root folder. This is the absolute path:

<link href="example.com/gallery.css" rel="stylesheet" type="text/css" media="all">

Assuming my art HTML page is example.com/art/index.html, the relative format would be:

<link href="../gallery.css" rel="stylesheet" type="text/css" media="all">

Just like I can go into a folder in a folder, I can back out of a folder and back out again. Suppose I'm linking to my homepage from my border image guide, which has its own folder inside of my guide folder, I would use the relative path:

<a href="../../index.html">

First I exit my border image folder, which takes me to my guide folder, then I exit that, which takes me back to my root folder with my homepage.

Complex relative paths

But what if I'm in my art CSS file (in my art folder) and I want to link to something in my assets folder? The absolute path would be like background: url('example.com/assets/stars.png');. I can combine both the backing out of folder and the entering folder notations for the relative path:

background: url('../assets/stars.png');

This code is in my art CSS file within my art folder, so I have to back out of the art folder with ../, then I enter the assets folder with assets/.

Suppose I want to add a border image to my gallery images, and my borders are in a folder in my assets folder; I would use:

border-image: url('../assets/borders/lace.png') 17 round;

The Root

The root folder is the base folder where your homepage "index.html" is stored. Its the first layer of your site. You can't back out of this folder without leaving your website. This may also be called the root directory (which is just another word for folder).

You can infact use root notation to relatively link to your files, using a slash / in place of your domain name like so:

background-image: url('/assets/stars.png');

<a href="/gallery/index.html"

This is nice for avoiding complicated relative filepaths, but it only works when uploaded to your host, it does not work when editting your site offline on your local computer files. This is because the folder you have all your site files in, is not the root folder of your computer. Your browser sees / and tries to go to the very base folder, thus it ends up out of your site folder and at the root of your computer files.