Hyperlink Anatomy

What are the different parts of a URL?

/Jun 24, 2023/in Innovation, Research, Website

Ever wondered what all those bits and bobs in a URL actually mean? I mean, we all use the internet every day, right? We’re constantly clicking links and typing out URLs, but do we really understand what they represent?

So, as a programmer (and a bit of a geek), I couldn’t resist the temptation to create something that unravels this mystery. And that’s how this nifty little applet of mine was born! It’s a fun, interactive tool that I’ve built to help you – and me – decode the various parts of a URL. It’s like a behind-the-scenes tour of your browser’s address bar.

This app breaks down everything from the scheme (that’s the “https” part) to the host (like “www.google.com“), subdomains, domains, subdirectories, the query string, parameter keys, values, and even that little hash symbol (which is actually called a fragment). I’ve put in a few snippets of info explaining each part, to give you an idea of how they all work together to get you to your digital destination.

In fact, even if you’re not a tech whiz, understanding this stuff can be super useful. For instance, knowing about schemes might make you think twice before entering sensitive information on a site that’s not ‘https’ secured. Or recognizing query strings could help you better use search functions on websites.

So, why not take this applet for a spin? Just click on the labels to learn more about each piece of the URL puzzle. By the end of it, you’ll be able to read URLs like a pro and who knows, you might even impress your friends at your next virtual hangout!

Quick Reference

  1. Scheme: This indicates the protocol to be used by the server, like ‘https‘ for secure browsing.
  2. Host: This identifies the server that’s hosting the web resource, like ‘www.example.com‘.
  3. Subdomain: This is a subdivision of the main domain, often used to organize content or services, like ‘blog’ in ‘blog.example.com‘.
  4. Second-Level Domain: The name of a website that signals its brand identity, for example, ‘mlb’ in ‘mlb.com‘.
  5. Top-Level Domain: This specifies the type of entity your organization registers as, like ‘.com’ for commercial entities or ‘.edu’ for academic institutions.
  6. Subdirectory: This is a subfolder that gives an indication of the specific webpage section, such as ‘hats’ in ‘https://shop.yourstore.com/hats‘.
  7. Query String: This is a sequence of non-hierarchical data (parameters) passed to the server for additional instructions or data processing.
  8. Query Parameter: This is a single query in a query string, consisting of a Key and a Value.
  9. Parameter Key: This is the unique identifier in a parameter that specifies additional information to the server, such as ‘q’ in ‘https://www.example.com/search?q=apple‘.
  10. Parameter Value: This is the data value assigned to a key in a parameter, like ‘apple’ in the example above.
  11. Path: This specifies the location of a specific resource on the server after the domain and any subdomain(s), such as ‘/products/software/index.html‘ in ‘https://www.example.com/products/software/index.html‘.
  12. Fragment: This is an optional component that directs to a secondary resource within a page, typically identified by a hash symbol (#).
  13. Separator: This is the delimiter (like ‘://’) that separates the scheme from the hostname or IP address.

Image Macro (for sharing)

Click the labels in the diagram above to learn about the different parts of a URL.

Scheme

The scheme tells web servers which protocol to use when it accesses a page on your website.

Before the invention of SSL (Secure Socket Layer) technology, websites were served over the unencrypted HTTP protocol. Nowadays, HTTPS — which stands for Hypertext Transfer Protocol Secure — is the most common scheme. It tells your web browser to encrypt any information you enter onto the page, like your passwords or credit card information, so cybercriminals can’t access it. This security protocol protects your website visitors and implementing it will help your site rank better on Google. That's why implementing SSL is a must-do on any technical SEO guide.

Other schemes you might see are mailto:, which can open your computer’s default email service provider to help you draft an email to the email address you entered in the URL, tel: which tells the device to dial the provided phone number if it has the ability to do so, and ftp:, which is a standard protocol for transferring computer files between a client and server on a computer network.

Host

The "host" is a part of a Uniform Resource Locator (URL) that identifies the domain name or IP address of the server that hosts the resource being requested. In other words, it is the network location of the website or web page that is being accessed.

For example, in the URL "https://www.example.com/index.html", the host is "www.example.com". It identifies the server that is hosting the website or web page that the user wants to access.

The host component of a URL is important because it helps web browsers and servers to locate and retrieve the requested resource from the appropriate server on the internet. Without the host information, the URL would not be able to identify the server hosting the resource, and the user would not be able to access the website or web page.

Subdomain

A subdomain is a part of a domain name in a URL that is located to the left of the main domain name and separated by a dot. In other words, it is a subcategory or subdivision of a larger domain name.

For example, in the URL "https://blog.example.com/", "blog" is the subdomain of the domain name "example.com". The subdomain "blog" indicates that the content being accessed is hosted on a separate server or section of the main website, and may contain different content or functionality from the main domain.

Subdomains are commonly used to organize content or services within a website, especially for large organizations or businesses that have multiple departments or offerings. They can also be used to provide access to specific content, such as language or country-specific versions of a website.

Subdomains can be created by the domain owner through the domain name registrar or web hosting provider. They can be assigned their own IP address or use the same IP address as the main domain, depending on the hosting configuration.

Second-Level Domain

The second-level domain (SLD) - often shortened to just "Domain" - is the name of a website. It helps people know they’re visiting a certain brand’s site.

For instance, people who visit “mlb.com” know they’re on Major League Baseball’s website, without needing any more information.

Top-Level Domain

The top-level domain (TLD) is intended to specify what type of entity your organization registers as on the internet.

For example, “.com” is intended for commercial entities, so a lot of businesses register with a top-level domain of “.com”. Similarly “.edu” is intended for academic institutions, so a lot of colleges and universities register with a top-level domain of “.edu”.

Subdirectory

A subdirectory — also known as a subfolder — helps people as well as web crawlers understand which particular section of a webpage they’re on.

For instance, if you own an online store that sells t-shirts, hats, and mugs, one of your website’s URLs could look like “https://shop.yourstore.com/hats”. Notice that the subdomain is “shop” and the subdirectory is “hats." That means this URL would serve up the “Hats” page, which is a subfolder of the “Shop” page. T-shirts and mugs would be other subfolders of this page.

Query String

A query string is an optional URL component preceded by a question mark (?), containing a string of non-hierarchical data passed to the server. These parameters are used to specify additional instructions or data for the server to process, such as search queries or user preferences.

Its syntax is not well defined, but by convention is most often a sequence of one or more attribute–value pairs (known as Parameters) separated by a delimiter.

* Visit this Stack Overflow post to learn more.

Query Parameter

A Parameter is a single query in a Query String, consisting of a Key and a Value.

Parameter Key

A Key - also known as an Attribute - is the unique identifier for a Query Parameter. It is assigned to a specific Value, separated by an equals sign (=), in order to provide additional information or instructions to the server.

For example, in the URL "https://www.example.com/search?q=apple", the key is "q", which stands for "query". The value assigned to the key is "apple", which is the search term being requested by the user. The server can then use this information to return search results for the specified query.

Keys are commonly used in URLs to pass data between the client (web browser) and the server. They can also be used to specify options, settings, or preferences for the resource being requested, such as language, date format, or user ID.

Multiple key-value pairs can be included in a URL parameter by separating them with an ampersand (&). For example, in the URL "https://www.example.com/search?q=apple&lang=en", there are two key-value pairs: "q=apple" and "lang=en".

Parameter Value

See: Parameter Key

Path

A path is a component of a URL that comes after the domain and any subdomain(s), and specifies the location of a specific resource on the server. It can include one or more segments separated by slashes ("/"), with each segment representing a subdirectory or file within the website's directory structure.

For example, in the URL "https://www.example.com/products/software/index.html", the path is "/products/software/index.html". This specifies the directory path to the specific resource, which in this case is a web page called "index.html" located in the "software" subdirectory within the "products" directory on the server.

Paths are important because they allow web browsers to locate and retrieve the specific resource being requested by the user. The path component can include file extensions such as .html, .php, .css, .jpg, and others, depending on the type of resource being requested.

Fragment

The optional fragment component is preceded by a hash (#).

The fragment contains a fragment identifier providing direction to a secondary resource, such as a section heading in an article identified by the remainder of the URI. When the primary resource is an HTML document, the fragment is often an ID attribute of a specific element, and web browsers will scroll this element into view. The element with the ID is known as the "Anchor" when used in this way.

Separator

The "://" after the URL scheme is a separator that indicates the beginning of the network location portion of the URL. It is a required delimiter between the scheme and the hostname or IP address.

For example, in the URL "https://www.example.com/index.html", "https" is the URL scheme, and "www.example.com" is the network location. The "://" separator indicates that the network location information is about to follow, and allows the web browser to properly parse and interpret the URL.

"It seemed like a good idea at the time,"

Tim Berners-Lee, the creator of the Web’s bedrock software standards admitted that when he devised the web, he had no idea that the forward slashes in every web address would cause "so much hassle".

Typing in // has just resulted in people overusing their index fingers, wasting time and using more paper[...] It's pretty pointless.

Tags: #InTheLab, internet, learning