A quick introduction to URLs

Galactic coordinates for the internet

If you've browsed the internet before, you've probably come across bunch of words in the top of your browser window. This is called a URL. For example, the URL of the page you're on now starts with https://www.beskar.co/ (at least, it should be if someone hasn't stolen my content!) Let's explore what this means and how it works.

Introduction

URL stands for Uniform Resource Locator, and it's a fancy way of saying "unique address". It's similar to how an astronaut might use the name of a planet, such as "Earth", to navigate to that planet.

Long URLs can look complex, but it's made up of a few simple parts. Here's an example of a longer URL:

Example URL

As you can see, it's made up of these elements...

Protocol

The first part is called the Protocol (or Scheme), and it tells the browser what type of information it's trying to access. For example, the protocol for this information is https://, which stands for "Hypertext Transfer Protocol Secure". This tells the browser that it's trying to access an https website.

There's also http, which is the same thing, but without the "secure" part. As you can probably guess, it's not as secure as https. If you want, you can read more about that on Cloudflare's website.

There are many other protocols as well, such as ftp for file transfer, mailto for email, and tel for phone numbers and ws for websockets. You can read more about them on MDN.

Domain Name

The next part is the Domain Name. This is the name of the website you're trying to access. For example, the domain name of this website is www.beskar.co. You can think of it as the name of the planet you're trying to navigate to. It's a unique name that identifies a specific website on the internet.

The Domain Name may or may not begin with www.. Nowadays this is optional and depends on the tastes of the developer. www. as you might expect stands for "World Wide Web", and it's a relic from the early days of the internet.

Port

The next part is the Port. This is a number that tells the browser which port to use when accessing the website. Computers and servers have lots of ports and each port is used for a different purpose. For example, port 80 is used for http and port 443 is used for https. You can read more about ports on MDN.

You very rarely see the port number in a URL as it's usually implied by the protocol. However, if you're building a website on your computer, you're more likely to see it. For example, if you're running a local server on port 3000, you might see a URL like http://localhost:3000.

Path

The next part is the Path. This is the path to the specific resource you're trying to access. If you're used to managing files on your computer, you can think of it as nested folders. In truth, you're actually not far off. The path is the location of the file on the server. You can read more about parameters on MDN.

Parameters

The next part is the Parameters, or Query String. This is a list of parameters that are passed to the server. For example, if you're searching for something on Google, the parameters might be q=hello+world. Parameters are typically added to URLs by the site's developers as a way of passing information to the server. You can read more about parameters on MDN.

Anchor

The final part is the Anchor. This is a unique identifier for a specific part of the page. For example, if you're reading this page, you might notice that the URL has a # followed by a bunch of letters and numbers. This is the anchor. It's used to navigate directly to a specific part of the page, like a Heading. You can read more about anchors on MDN. You can add an anchor to any element on a page by adding an id attribute to it e.g.

<h1 id="my-heading">My Heading</h1>

How URLs connect to websites

Across the internet, there are a variety of systems that help maintain a list of all the websites on the internet. When you type a URL into your browser, it sends a request to the DNS (Domain Name System) to find the IP address of the website. The DNS then sends the IP address back to the browser, which then connects to the website.

IP Address stands for Internet Protocol Address, and it's a unique number that identifies a specific website. It's similar to how an astronaut might use galactic coordinates to navigate to a specific planet. So saying "Earth" is the same as saying "VX099 CY099 DD011 R:16" (or something like that. I'm not an astrophysicist).

You can learn more about DNS on Cloudflare's website.

Navigating by IP Address

If you know the IP address of a website, you can navigate to it by typing it into your browser's address bar. This is often redundant since most public websites have has a domain name, but it can be useful for testing purposes, or if you're trying to access a website that doesn't have a domain name yet (super secret!)

There are two types of IP Addresses: IPv4 and IPv6. IPv4 is the "current" version, and it's made up of 4 "octets" (i.e.numbers) separated by periods, e.g. x.x.x.x. Each x can be a number from 0 to 255. For example, the IP address of google.com is 142.250.64.238. You can test this by copying and pasting the IP address into your browser's address bar.

There's also IPV6, which is the "next" version. It's made up of 8 groups of 4 hexadecimal numbers separated by colons and looks a bit more complex. For example, 2a00:1450:4001:80c::200e.

Constructing URLs effectively

In JavaScript, you can construct URLs using the URL class. While it sounds trivial, the constructor comes with a lot of handy utilities that make it easy to construct more complex URLs. For example, you can create a URL like this:

const url = new URL('/blog', 'https://www.beskar.co/'); // Double trailing slashes are resolved automatically
 
url.searchParams.set('q', 'hello world'); // Parameters are automatically encoded e.g. q=hello+world
 
const href = url.href; // Returns https://www.beskar.co/blog