Anatomy of a URL

The Basics

I'll wager that you've used a URL before. Uniform Resource Locators are sets of parameters designed to be user-friendly ways of accessing online resources.

Files served online all have their own locations, so a URL will resolve to an IP address associated with the target resource. Far more convenient to remember a company's website than their exact IPv4.

The Sum of its Parts

In order to help guide my explanation of a URL's components, I'm going to refer to this image from MDN's website that breaks it into pieces.

Scheme

The most common scheme/protocol that you'll see when surfing the web is HTTPS (or HTTP) — Hypertext Transfer Protocol (Secure). When possible, your browser will default to this if you enter a URL without explicitly typing it.

HTTPS has become so common over the less secure HTTP that your browser will actually warn you when you're not on it. That's why ensuring HTTPS via an SSL certificate is so important; it's an immediate way to build user trust.

Another protocol you might familiar with is SSH (Secure Shell), which is used when remotely logging into another computer. This is the magic behind a lot of work-from-home capabilities. There's also FTP/SFTP (Secure File Transfer Protocol) which, as you can probably guess, is used for the transfer of data.

A protocol I've used in development is 'mailto:' since it allows for the creation of links that pre-populate an email. You can try this by typing mailto:[email protected] into your browser, and once you hit enter, it should open a blank email template in your device's mail client. You can even add parameters to the end of it to include a subject line, CC list, body text, etc., but it's less convenient to do this than to just compose an email through an app or client.

Authority

The authority segment is made of a couple of smaller parts: a domain name, and port. The domain name is typically the website's actual 'name' as you would remember it. In my site's case, the domain is stevendiresta.com. In theory, you could enter a website's IP address to access it directly instead of using its domain name, but this may or may not work. Occasionally, the SSL certificate can be associated with the domain, not the IP, so you may get a warning if you try this.

Ports aren't seen as often in URLs because the frequently-used HTTPS protocol is used on port 443.

The 'mailto' protocol actually doesn't use an authority segment at all, which is why it doesn't have the two forward-slashes (//) after its colon.

Path to the File

Resources that are hosted online (and for the sake of this example, in webpages) are set up as items placed within directories. That means this segment of the URL is used to specify the file that you wish to access.

For example, each of the articles on my site's homepage have a thumbnail image at the top above the title. It's blurry until you hover it, but it's behind the blur nonetheless. If you add the image's file path to the end of the homepage's URL and then submit the search, it'll open the image itself in your browser. It would look like this:

This is essentially what's happening when you navigate to any specific page — they exist as HTML files, and once requested, they render in your browser.

Parameters

Parameters are data added to a URL in pairs in order to provide your target resource with extra information. A good example is when you're watching a video on YouTube — there will be a parameter in the URL that tells the website which video to load into the player. The key in this case is the 'v', and the value is the string of characters that comes after the equals sign.

Some other examples might be similar applications of pre-populated information into online forms, or using referral links to reach a website from a recommendation.

You can't just add your own parameters as you please — the way these are generated and processed are completely unique to the website you're on.

Anchor

There's even a way of navigating to particular elements that exist on a page. Through the use of element attributes, I can assign a unique ID value to an HTML element so that it can be directly referenced. This is using that element as an anchor on the page. You just need to add a pound sign in the URL followed by the ID, like this:

Clicking this link (or entering it into your browser) should keep you on this page, but scroll you up higher in the article. Technically, it's scrolling you up to the image of the URL that's embedded in the article. It doesn't quite look like this in practice because the navigation bar that's stuck to the top of the page is obscurring it.

In Conclusion

This is another one of those topics that I find fascinating because it involves something that's used millions of times every day, but most people probably don't understand how or why. You won't be any more interesting at parties for knowing this, but if you learned something new then that should be good enough.

Additional Resources

For some additional context on URLs and their composition, check out MDN's Resources on the subject.