URLs

What is a URL?

In technical terms, A URL (Uniform Resource Locator) is a string of characters that defines the address of a web page or other resource on the internet. It has a few parts we should know about:

Protocol: The protocol defines the method by which the resource is accessed. "http" and "https" are the most commonly used protocols for accessing web pages.
Domain Name: This is the human-readable name of the website that you want to access. For example, "designftw.mit.edu" is the domain name of this website.
Path: The path is the location of the resource within the website. For example, "/resources/" or "/resources/urls/" are some paths you should sometimes check out on this website.
Query String: The query string is used to send additional data to the server. For example, "q=what+is+a+url" is the query string of absolute url https://www.google.com/search?q=what+is+a+url.

When you enter a URL into your web browser, the browser sends a request to the server specified by the domain name. The server then sends back the resource (e.g. a web page) that corresponds to the URL and your browser displays the response (usually HTML, and some CSS/JS files) on your screen.

There are two main types of URLs we are interested in: absolute and relative URLs.

Absolute URLs

Absolute URL is the address that includes all of above, i.e., the full address. The absolute URL of this webpage is https://designftw.mit.edu/resources/urls/index.html. When you want to share this webpage with a friend, then you send the absolute URL, so they can access to the exact same resource you are accessing. However, you should never use absolute URLs when coding a website unless it's a pointing to another website. To see why, we can look at an imaginary but a possible scenario. Let's say we used absolute URL to link this page from the resources list:

...
<li><a href="https://designftw.mit.edu/resources/urls/">URLs</a></li>
...

Not only this, but we used absolute URLs everywhere on this website. Everything is working as expected until it turns out the weather conditions broke MIT's all nameservers in addition to the Stratton Student Center (aka Stud), and designftw.mit.edu is not accessible anymore. We still want you to access the course website, so we forward you to our alternate the domain designftw.netlify.app. But there's an issue. When you click on any link, it goes back to designftw.mit.edu 😯 😯 😯

This extreme example illustrates the maintainability issues that arise from using absolute URLs: many links would need to be edited. In addition, the repetition of https://designftw.mit.edu/... everywhere clutters the appearance of the links. It is also important to consider that when developing locally, a domain is typically not available yet. In this case, how would you link to resources? Using http://localhost/... everywhere only returns to the original issue.

Fortunately, there's a solution!

Relative URLs

Relative URLs are used to specify the location of a resource in relation to the current page, rather than specifying the absolute URL. They are typically shorter and easier to read than absolute URLs, and they are often used when the resource is within the same domain as the current page.

There are two types of relative URLs we'll use the most.

Root-relative URLs: These URLs specify the location of a resource relative to the root directory of the website (whose path is usually "/"). Assuming the root directory of the website is located at "/", then a root-relative URL of this page would be "/resources/urls/". Note that the beginning of root-relative URL will start with the root directory, which is in most cases "/".
Path-relative URLs: These URLs specify the location of a resource relative to the current path (which defines the current webpage on the website). For example, if the current path is "/resources/" (i.e, root-relative URL for the list of resources page), then the URLs page (you are here now!) is located at "urls/", while Editors page is located at "editors/". It's also possible to go up by using double periods (".."). So the path-relative url for homepage would be "../" and for schedule it would be "../schedule/". In fact, a single period (".") refers to the current directory, but we usually omit it. That means URLs page could be referred as "./urls/" too. Make sure to not add "/" in the beginning of a path-relative URL, otherwise they'll just become a root-relative URL!

This process might remind you something you use everyday: the file explorer of your computer. That's because websites are mostly also just a tree of files and directories. Here's how this this website might look like (not actually, but given as example):

. (root=designftw.mit.edu)
├── index.html (home page)
├── resources
│   ├── index.html (resources list page)
│   ├── urls
│   │   └── index.html (URLs page, you are here)
│   ├── editors
│   │   └── index.html (editors page)
│   ├── localhost
│   │   ├── media
│   │   │   └── live_server.gif (gif for live server extension)
│   │   └── index.html (Starting a local server page)
│   ...... (other resources omitted)
│
├── schedule
│   └── index.html (schedule page)
│
├─ ...... (other resources omitted)
│
...... (other resources omitted)

So, if you are in the "/resources/localhost/" path (editing index.html), then you can access to live_server.gif with relative path "media/live_server".

Check yourself: How would you get live_server.gif from the path "/schedule/"?

Here's a small demo you can play with to experiment with relative paths. Notice that base URL being "." means the base is the current location (i.e., this page). First, try changing only the relative url to see what other paths you can explore, then also try changing base URL. For example, you could set it to "/" to see relative paths from the root of this website.

Relative URL: Base URL: Result (absolute URL): {{new URL(relative, absoluteBase)}}

Other types of relative URLs

It's good to know that there's also query-relative URLs that will change the query string. It can be used such as:

<a href="?q=url+query+string">Search for "url query string"</a>

There's also hash-relative URLs:

<a href="#absolute-urls">Jump to Absolute URLs section</a>

Try clicking on it: Jump to Absolute URLs section. In a webpage, a hash will typically refer to the element with given id attribute. Check for yourself: inspect this page and see what's the id attribute of the "Absolute URLs" header.

You can also read about protocol-relative URLs here: Protocol-relative URL.