A relative URL is a URL that only makes sense relative to a particular directory on your Web server. Relative URLs can be specified relative to either the current directory or relative to the root directory. This can get a bit complicated, but I’m gonna try to keep this as simple as possible. So prepare to have your attention span serioiusly challenged.
You might remember from my previous article that an absolute URL is used to reference resources outside your site. Well, in contrast to this, a relative URL should be used to reference any page or file or other resource within your website. This makes maintaining the website, changing the site’s domain name, and moving the website to a different server much easier than if you use absolute URLs for internal references. It also allows us to use much shorter urls than we otherwise would have to.
Basing a Relative URL on the Root Folder
As I said, you can specify a relative URL in relation to the root folder or directory. To do this, all you have to do is start the URL with a forward slash (/). In a moment we’ll look at when we should base our relative URLs on the root directory, but, first, let’s look at some examples…
| Examples of URLs Relative to the Root Folder | Description of Folder / File | Relative URL |
|---|---|
| Root Folder (i.e., the home page) | / |
| A file in the root folder | /about.html |
| A folder in the root folder | /products/ |
| A descendant folder of the root folder | /site‑files/images/ |
| A file in a descendant folder of the root folder | /site‑files/styles.css |
Did you notice that the home page is signified with just a slash (/)? Yes! You can reference your home page from anywhere in your site with just the / symbol (as long has you have named your home page file a default file name like index.html or index.php or similar and as long as the site is on a web server.
When to Use a Root-based Relative URL?
Since a root-based relative URL always starts from the root directory, it will be the same regardless of where in your site’s directory structure that your current document is located. Therefore, a root-based relative URL should be used to reference any resource that will used throughout the site. Typically, this means parts of the website that do not change from page to page — basically, anything that is part of the website’s interface or general look-and-feel. Perhaps some concrete examples will help to clarify this even more.
| Examples of When to Use a Relative URL | Usage | Example HTML Utilizing a Relative URL |
|---|---|
| external CSS files | <link rel="stylesheet" type="text/css" href="/interface/style.css" /> |
| external JavaScript files | <script type="text/javascript" src ="/interface/script.js"></script> |
| header images | <img src="/interface/images/header.jpg" /> |
| site’s logo | <img src="/interface/images/logo.jpg" /> |
| navigational menu images | <img src="/interface/images/menu-button.jpg" /> |
| navigational menu links | <a href="/">Home</a> |
| links to top level pages | <a href="/about.html">About Us</a> |
| footer links | <a href="/tos.html">Terms of Service</a> |
| footer images | <img src="/interface/images/footer-bg.jpg" /> |
Please understand that the above list of examples is not exhaustive…not at all. Remember that the main idea is that a relative URL generally should be based on the root directory whenever we want to reference a particular page, file, or other resource on every (or nearly every) page of our site.
Basing a Relative URL on the Current Folder
When basing the relationship on the current directory, we can use a relative URL to reference resources in parent (or ancestor) directories and in child (or descendant) directories as well as in the current directory.
To move up one folder from the current folder, you use two dots followed by a slash (../). You can chain as many of these together to up as many folders (or directories) as you need to. To move down a folder, just name the folder and follow it with a slash (/).
Below are several examples of relative URLs. The first section of the table deals only with folders, the second section deals with files.
| Relative URL Examples | Relative Folder | Relative URL |
|---|---|
| parent folder | ../ |
| sibling folder(child folder of parent folder) | ../widgets/ |
| ancestor folder | ../../ |
| child folder of ancestor folder | ../../widgets/ |
| child folder | widgets/ |
| descendant folder | widgets/thingamabobs/ | Relative File | Relative URL |
| sibling file (file in current folder) | example.html |
| file in parent folder | ../example.html |
| file in ancestor folder | ../../example.html |
| file in child folder of ancestor folder | ../../widgets/widget35.html |
| file in child folder | widgets/widget35.html |
| file in descendant folder | widgets/thingamabobs/thing06.html |
Don’t forget you can go up or down in the folder hierarchy as far as you need to. So, for example, “../../../../fruits/apples/mcintosh/ripe.html” is a valid relative url. The web server would look for a file named ripe.html in the great-grandchild folder of the great-great-grandparent folder of the current folder. Hopefully, you will never have to work on a site that has such a complicated directory structure, though. 
When to Use a Relative URL Based on the Current Folder?
Basically, you will want to base a relative URL on the current directory whenever you have a group of pages, files, or other resources that have a strong hierarchical relationship with each other — files and resources that will likely maintain the same relationship to each other even though they might (as a group) get moved to a different place in the site’s directory structure.
Let’s consider part of an example website’s directory. Before we discuss the directory, let’s take a look at what it might look like.
- root
- products
- index.html
- garden-gloves.html
- hedge-trimmers.html
- shovel.html
- product-images
- garden-gloves.jpg
- hedge-trimmers.jpg
- shovel.jpg
- products
We will focus in on the products folder. The products folder is itself a child of the root directory. Therefore, the products folder is what we call a top-level folder. We have named the main products page index.html, which a default type of file. This means that we need only reference the products folder itself, and the Web server will actually return the index.html file from the products folder.
Because it is a top-level folder, any relative URL linking to this folder (which would really be links to the main products page) generally should be based on the root directory — especially links to this page that are in any navigational menus. So, for example, a link to the main products page within the navigational menus of the website might look like this…
<a href="/products/">Products</a>
However, within the content areas of the individual product pages (e.g., garden-gloves.html) we should use links back to the main product page relative to the products folder (not the root folder). We should do this because of the strong hierarchical relationship among the product pages in the main product page. We might later, for some unknown reason, move the products folder down a level or two within the directory structure. If we do, we will likely remove any links to it from the navigational areas of the website. However, we would want the links among the product pages to still be valid. So, for example, a link within the content area (i.e., NOT within the navigational menus) of one of the individual product pages back to the main product page might look like…
<a href="../products/">Products</a>
Of course, links from the main product page to any of the individual product pages should definitely be based on the products directory. So, if we’re linking to one of the individual product pages from the main product page, the anchor tag might look like…
<a href="garden-gloves.html">Garden Gloves</a>
References to any of the images within the product-images folder from any of the product pages (including the main product page) should also be based on the products directory. So, for example, a reference to one of the product images from one of the product pages might look like…
<img src="../product-images/garden-gloves.jpg" />
However, references to any of the product images from pages that are NOT in the products folder should probably be based on the root directory. So, if we were to show one of the product images, say, on the website’s home page, the image tag might look like…
<img src="/products/product-images/garden-gloves.jpg" />
Whew! Take a deep breath. I hope you made it through all of that without going into a coma, but at least you now have a working knowledge of what a relative URL is and how and when to use one.
