DEV Community

loading...
Cover image for The anatomy of a URL

The anatomy of a URL

evybauer profile image Evelyn Bauer ・4 min read

Have you ever noticed that some URLs are super long and others not that much? The good news is that URLs are an exciting topic to study or simply read about! Moreover, analyzing URLs helps understand how the URL, the browser and the website’s functionality interact. In this post, you’ll get to know more about the structure of a URL, how it works and the importance of the parts of a URL.

Why don’t we start the classic way, how it all began? A long time ago websites were static documents linked one to another, and the protocol, the server’s name and the document’s path were enough to access a website. The protocol is the part of the URL responsible for telling the computer how to interact with the server of the website you want to visit. When you type a website address in your browser, the HTTP tells your computer to expect to receive data that’s been structured for websites. Then, the server’s name comes following the HTTP and indicates the name of the website you want to access.
Alt Text

As the internet evolved, URLs had to evolve as well. That’s when parameters came to the game. Parameters, also known as “extensions of the URL”, are extra bits of information that had to be added to the path to allow the server to respond dynamically to users’ requests and guarantee that they would be able to access any page nested within multiple paths. They work as filters and organize the path of the data being passed (request) of data sources that fetch the page you want to access. It’s important to note that query parameters are not random information thrown at the end of the URL, they are attributes that perform a cross-platform process. Additionally, certain characters must be encoded to parameters validate the URL.

A URL can be more complex than that but for general understanding, these three parts can well demonstrate how URLs function and interact with the browser. The following is a complete overview of a URL. Please, take into consideration that some of the terms and the way the URL is structured may vary depending on your research.
Alt Text


Escaping Process

When a string is part of a URL, it cannot contain whitespaces. The whitespaces are replaced with special characters such as: !, “, and #, %20. This process is known as the escaping process and it happens when symbols or non-alphanumeric characters are part of the actual search query. In other words, if you search for “What time is it?” a new character will replace the question mark with expressions such as the ones mentioned above. The question mark functions as a signal to the URL that follows the search parameters.

But note that, for all these pieces to work together, we need some commands for the URL to understand what is a protocol, the server name and a parameter. That’s when symbols become handy.

-- Slashes (/): order the hierarchy within the extension and work like nested folders.
-- Questions mark (?): added after a query parameter to append query parameters to the end of a URL.
-- Ampersands (&): used between each parameter to add multiple parameters.
-- Equals signs (=): used to separate keys from values in any key-value pairs. To separate different pairs use ampersands (&).
-- Hash sign (#): added to introduce the parameters to the URL. The parameters added after the # are never sent to the server and it is exclusively used by the web browser or to refer to sections within a document.

With that in mind, we can move along and categorize URLs into static or dynamic, depending on how many crazy characters are included.


Static and Dynamic URLs

Static URLs contain only dots, slashes, dashes, and underscores. They tend to traffic better than dynamic URLs and rank higher in Google searches since they’re easier to read and remember.

Dynamic URLs contain question marks, ampersands, equal signs, exclamation points, asterisks, and other keyboard symbols snake their way into these navigation bars. Generally, see lower click-through rates.


URL shortener

If you are a big fan of short URLs, you must be asking yourself, what happens with all this information when we shorten the URL?

Shortening URLs does not mean you will get rid of important information, it simply stores that information somewhere else (a database for example). When a user clicks on the shortened link, the browser will look for the shortened URL in the service and send an HTTP request to redirect to the longer URL leads.


In summary, a URL can have many levels of complexity depending on the research you are trying to achieve. The most important of all is to understand the protocol, server’s name and parameters flow to understand how they interact with the browser and the way the information is returned to the user. I hope you find this post helpful.

Happy coding! 👩‍💻


References:
https://gizmodo.com/1722322072
https://branch.io/glossary/query-parameters/
https://appendto.com/2016/02/replace-spaces-underscores-javascript/

Discussion (0)

pic
Editor guide