Look at these 3 URLs :

https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=43s

Yes , that’s clearly a youtube video. Watch it >_<

https://www.google.com/search?q=best+restaurants+in+las+vegas&hl=en#ip=1

A simple google search on restaurants , nothing special.

https://www.geeksforgeeks.org/courses/search?source=google&medium=cpc&device=c&keyword=geeksforgeeks&matchtype=b&campaignid=20039445781&adgroup=147845288105&gad_source=1&gad_campaignid=20039445781&gbraid=0AAAAAC9yBkCxB9KL-tydjtd24SrU_lpRb&gclid=CjwKCAjw25fWBhAVEiwAMopNjoDxJdiERi-4ubEF4uNY3xj2NtsNssI5tTvuBMMEBQ5HNENUEEzqnhoCRyUQAvD_BwE&query=urls

THAT is a regular GeeksForGeeks search page , again , nothing special for a CS grad. , right?

If you are from a technical background , you’d have noticed a pattern like this in all 3 [ It’s okay if you didn’t:) ] :

scheme://host:port/path?query#fragment

OR this :

scheme://username@host:port/path?key=value&key2=value2#fragment

It is important that we understand the compartmentalisation of those

Uniform Resource Locators.

INSTEAD , have you ever wondered upon why a URL was designed the way it is right now & how it matters?

Did you notice all the shapes & characters used in this url pattern other than the alphabets? No need to scroll up , I’ll list the common ones here :

• A dot .
• A hyphen -
• A double Forward slash //
• A single Forward slash /
• An underscore _
• Percentage %
• A hashtag #
• An equal to =
• A colon :
• At the rate @
• An Ampersand &
• A plus sign +
• And finally, a question mark ?

Imagine a URL without any of these (Sounds like a wordle word).

httpsgooglecomqredshoesize9

Now , a mini flashback for your context window :

URLs were created in 1990 by the same guy who spelled ‘WWW’ [World Wide Web] for the first time - The great Tim Berners-Lee. And Interestingly , things like email , Unix folder Paths , and the Internet itself existed before URLs.

I know , it sounds confusing , but yeah , the 70s kids were able to send an email to connected computers using SMTP [Simple Mail Transfer Protocol] and transfer documents through FTP [File Transfer Protocol].

Now , let me connect the bridge between URLs , punctuations of language of URLs , and Human thoughts & familiarity. Trust me , it’s gonna get interesting:)

A colon : "http:" -> says the type of communication is HTTP

It was already being used as a natural separator for years. Remember writing your name on top of new school notebooks like this?

Name : Vidya V
Class : X-A

And writing the time as 12:30 p.m. ? So our brain’s been wired to identify it and think that a colon visually says :“The thing after me is related to the thing before me.” . Same logic applies to port as well , apple.com:8080 means :
“host : port 8080”.

Hierarchy — ‘A forward slash /’ : apple.com/products/phones/17-pro

The biggest borrowed idea ,forward slash. The Unix file systems were already listing the folder structure like this :

/
home/
vidya/
photos/
cat.jpeg

Unix basically made ‘/’ look familiar to all the CS crazies. Each ‘/’
says: “Now go one level further.”
As for the outer to inner hierarchy , Think of directing a new visitor in a mall trying to buy a shoe , where there are arrow marks at every corner , something like : “Floor 2 ->” , “Nike<-” , “Shoes->” , “Running shoes (Below)”. You’re progressively identifying where something is , from an outer most location to that exact spot. Hope that explains the use of ‘/’ in URLs , the most common character.

A divider or a Boundary — ‘A double forward slash //’ : https://

A stretchy thought. Back when people used to write & do calculations on paper (Ikr , old times) , usually there was a habit of including a ‘//’ by the end of all the math , something like this :

10 × 5 = 50
50 + 20 = 70 //

Also used in some poetic quotations in english literature as well :

Roses are red / 
Violets are blue // ...

Associate them :

On paper: // → boundary/end of one thing.
In a URL: // → boundary; the authority/address part comes next

At @ : https://vidya@apple.com/profile

Emails existed almost 2 decades before web. Ray Tomlinson , the first guy to send an email [He tested it with “QWERTYUIOP” >_<] , chose @ for network email addresses in 1971. So , vidya@apple.com , literally meant ->
Vidya AT apple.com , also because ‘@’ ain’t something that’s commonly found inside people’s names. So when URL syntax needed to represent user information at a particular host, the same idea made sense.

“A dot .” : https://www.apple.com/

DNS [Domain Name System , the internet’s Contact list] was developed in the 1980s, before the Web, and the idea of ‘.’ came from domains. The dots show the separate levels of the name. So , Visualize maps.google.com as :

com              --> A top level domain
|___ google      --> A domain registered under .com
      |___ maps  --> A subdomain under google.com

So , they already had that naming system andd URLs simply incorporated it.

DID U KNOW : There’s actually an invisible dot by the end of it.

So it’s “maps.google.com.”. That last dot represents the DNS root. We usually leave it out because browsers implicitly understand it. So , it’s actually :

.                  --> DNS root
|___ com
      |___ google
             |___ maps

Percent — % : A special escape : .com/what%20is%20json

The Programming languages & protocols had already developed the general idea of escaping special characters. That’s why URLs use percent encoding.

What if it need to send a character that normally has a special meaning? Use % to inform that the following characters are not meant to be intepreted as it is , instead it’s encoded.

Think of a “Hello World” in a google search. It’s represented as

Hello%20world

in a URL. That’s because 20 is the hexadecimal representation of the byte for a space in ASCII!

A Hashtag # Fragment : /wiki/website#About

Before the web , people usually mentioned a specific numbered item using a hash like this :

Room #12
Order #583
Item #7

It just means , the specifically identified one. For example , in this URL :
wikipedia.org/wiki/Website#Types , the browser uses the URL “wikipedia.org/wiki/Website” to get the wikipedia page about websites from the web and the “#Types” is the exact fragment or segment in that webpage that will be scrolled to immediately by your browser like Chrome or Edge.

DID U KNOW : Calling something like #types a “hashtag” came much later actually. In a URL, the proper term is a fragment or fragment identifier.

Other generic URL punctuations :

• An equal to “=” - that’s used for exactly what it’s named after:)
  …color=red…
• An ampersand “&” - used to add queries in a URL , like in sentences.
  …size=7&color=red…
• A question mark “?” - used to introduce a query (question) in a URL
  …/search?q=perfumes…
• A plus sign “+” - often used for spaces , similar to % in URLs
  …?q=how+to+not+be+bored…

That sums up how I remember & interpret the /Language+of+URLs#Human-memory. Anytime you see a big URL from now on, hope this helps understand them simply. Now , Go back to the top and take a look at those 3 URLs again & thank me by following Vidya V !