Anatomy of URL

The URL as we type in the browser is a phenomenal piece of engineering that is formed by forging multiple components together. Each plays a unique role from security to exchanging data to passing data.

let us see each component of it. Consider the below URL for example.

https://learnersbucket.com:443/examples?utm_source=menu#hello

This URL is composed of 7 different parts.

  1. Protocol: https โ€“ The protocol through which data will be exchanged.
  2. Domain: learnersbucket.com โ€“ Unique identifier.
  3. Port: 443 โ€“ Determines at which port the application is running. The same domain can run on multiple ports.
  4. Path: examples โ€“ the subpath of the URL (There can be multiple sub-paths)
  5. Query: ? โ€“ Determines the string after this are parameters.
  6. Parameters: utm_source=menu โ€“ Key-value pairs that can be accessed inside the webpage in JavaScript (There can be multiple parameters concatenated by &).
  7. Fragments: #hello โ€“ Moves to the DOM element with the given ID on the page.