Structure of URL

Protocol : A URL's protocol also known as transfer protocol or scheme regulates how data is sent between the host and a web browser.

//example
http , https , tcp ,smtp

Subdomain : Subdomains that are a little more subtle, exhibiting a relative dependence and being a component of a higher level domain. eg.

//example
www.example.com , mail.example-smtp.com

Domain name : The Domain Name System uses a domain name as a registered identifying string to create a distinct region of authority and autonomy. eg.

//example
google.com , dev.to

Second-level domain : A second-level domain is a domain that is immediately behind a top-level domain.

//example
www.example.**second-level**.in , www.example.**blogging**.io

Top-Level Domain : A top-level domain is a domain which is at the top of the Domain Name System hierarchy.

//example
.com ,.in ,.net , .io 

Path : The path specifies the precise location of a page, post, file, or other item. It is frequently comparable to the website's underlying file structure.

//example
/home , /dashboard , /settings

Query String (Params) : Depending on the implementation, parameters are found at the very end of the URL or within the path. URL parameters are expressed as key/value pairs that begin with a '?' and are separated by an ampersand '&.'

//example
https://www.example.com/settings?username=name , https://www.example.com/settings?email=[e-mail]&id=09

Fragement identifier : A precise location within an HTML page.

//example
 www.example.in#latest

Comments

[peerreynders]

const url = new URL(
  'http://tim:[e-mail]:8080/home?params=09#id'
);
console.log(url.protocol); // 'http:'      aka [ scheme ':' ]
console.log(url.username); // 'tim'                       
console.log(url.password); // 'secret'                       
console.log(url.origin);   // 'http://www.example.com:8080'
console.log(url.host);     // 'www.example.com:8080'
console.log(url.hostname); // 'www.example.com' 
console.log(url.port);     // '8080'
console.log(url.pathname); // '/home'      aka path
console.log(url.search);   // '?params=09' aka [ '?' query]
console.log(url.hash);     //  '#id'       aka [ '#' fragment ]

MDN: URL

The naming is largely inspired by

• RFC 3986
• RFC 2396
• RFC 1738

[Rohith ND]

Wow ! This appears to be rather interesting. Thank you for bringing this to our attention. I'm hoping that this will be useful to a large number of people, including myself.

[Dulranga Dhawanitha]

Nice Explanation !!
Keep it up.

[Diego (Relatable Code)]

Great breakdown. Certainly feels like a lot of modern frameworks don't take into account the subtle intricacies of page URLs. (thats a different point)

[Medea]

Nicely explained!