Understanding Relative URL Paths in Web: Explained

Introduction

In this blog post, I will explain the difference between relative URL paths that start with /, ./, or ../ and how to use them correctly in HTML.

Relative URL paths are used to navigate through directories and locate resources within a website. When a URL path starts with "/", "./", or "../", it specifies the relative location of the desired resource from the current location of the page.

What is URL?

A URL (Uniform Resource Locator) is a way of identifying and locating a resource on the web, such as an image, a script, or a document. A URL consists of several parts, such as the scheme (e.g. http or https), the domain name (e.g. example.com), and the path (e.g: /images/picture.png).

What is Relative URL or Path?

A relative URL is a URL that only includes the path, and it is relative to the current document or base URL.

For example, if the current document is located at http://example.com/mywebsite/index.html, then a relative URL like images/picture.png would point to http://example.com/mywebsite/images/picture.png.

However, not all relative URLs start with the name of a directory or a file. Some relative URLs start with /, ./, or ../, which have different meanings and effects.

Type of Relative Paths

Here's an explanation of each of these relative URL path prefixes and examples:

"/" (Root-relative path):

When a URL path starts with "/", it is considered a root-relative path. This means that the path is relative to the root directory of the website. Regardless of the current page's location, using "/" at the beginning of a URL path will always refer to the resource from the root directory.

In other words, A relative URL that starts with / is called a root-relative URL. It starts from the root of the website, not from the current document or base URL.

For example, if the website is located at "https://example.com", and the URL path is "/images/pic.jpg" it would refer to the "pic.jpg" file in the "images" directory under the root of the website.

Another example, if the current document is located at http://example.com/mywebsite/index.html then a root-relative URL like /images/picture.png would point to http://example.com/images/picture.png not http://example.com/mywebsite/images/picture.png.

“. /" (Current directory-relative path):

The "./" prefix indicates that the URL path is relative to the current directory (folder) of the current page. It allows you to reference resources in the same directory as the current page.

In other words, A relative URL that starts with ./ is called a current directory-relative URL. It starts from the current directory of the document or base URL.

For example, if the current page is located at "https://example.com/products/index.html", and the URL path is "./images/pic.jpg" it would point to the "pic.jpg" file located in the "images" directory within the "products" directory.

Another example, if the current document is located at http://example.com/mywebsite/index.html, then a current directory-relative URL like ./images/picture.png would point to http://example.com/mywebsite/images/picture.png which is the same as images/picture.png.

“../" (Parent directory-relative path):

The "../" prefix signifies that the URL path is relative to the parent directory of the current page's location. It allows you to traverse up one level in the directory hierarchy.

In other words, A relative URL that starts with ../ is called a parent directory-relative URL. It goes up one level in the directory hierarchy of the document or base URL.

For example, if the current page is located at "https://example.com/products/index.html", and the URL path is "../about.html" it would refer to the "about.html" file located in the parent directory of the "products" directory.

Another example, if the current document is located at http://example.com/mywebsite/index.html, then a parent directory-relative URL like ../images/picture.png would point to http://example.com/images/picture.png, which is the same as /images/picture.png.

Absolute Path (the alternative solution)

One way to avoid confusion and errors is to use absolute URLs instead of relative URLs. Absolute URLs include the scheme and the domain name, so they always point to the same resource regardless of where they are used. However, absolute URLs have some drawbacks as well. They can make your code less portable and more difficult to maintain if you need to change your domain name or switch between HTTP and HTTPS protocols.

Another way to avoid confusion and errors is to use a base element in your HTML head section. A base element specifies a base URL for all relative URLs in your document.

For example, if you add <base href="http://example.com/mywebsite/"> to your HTML head section, then all relative URLs in your document will be resolved relative to this base URL, regardless of where they are used.

Using a base element can make your code more consistent and easier to maintain, but it also has some drawbacks as well. It can override the default behavior of relative URLs and cause unexpected results if you are not careful. It can also affect links to external resources that use relative URLs.

Conclusion

By using these relative URL path prefixes, you can easily reference resources within your website, regardless of the current page's location, without specifying the complete URL.

To summarize, here are some examples of how different relative URLs would resolve depending on the location of the current document:

| Current document | Relative URL | Resolved URL |
| ---------------- | ------------ | ------------ |
| http://example.com/mywebsite/index.html | images/picture.png | http://example.com/mywebsite/images/picture.png |
| http://example.com/mywebsite/index.html | /images/picture.png | http://example.com/images/picture.png |
| http://example.com/mywebsite/index.html | ./images/picture.png | http://example.com/mywebsite/images/picture.png |
| http://example.com/mywebsite/index.html | ../images/picture.png | http://example.com/images/picture.png |
| http://example.com/mywebsite/blog/post.html | images/picture.png | http://example.com/mywebsite/blog/images/picture.png |
| http://example.com/mywebsite/blog/post.html | /images/picture.png | http://example.com/images/picture.png |
| http://example.com/mywebsite/blog/post.html | ./images/picture.png | http://example.com/mywebsite/blog/images/picture.png |
| http://example.com/mywebsite/blog/post.html | ../images/picture.png | http://example.com/mywebsite/images/picture.png |

As you can see, using relative URLs can be tricky and sometimes confusing. Therefore, it is important to understand how they work and how to use them correctly in HTML.

Therefore, when using relative URLs in HTML, you should always be aware of their meaning and effect, and choose the best option for your situation.

Views