DEV Community 👩‍💻👨‍💻

Rohith ND
Rohith ND

Posted on

Structure of URL

anatomyurl

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

anatomyurl

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=email@gmail.com&id=09
Enter fullscreen mode Exit fullscreen mode

Fragement identifier : A precise location within an HTML page.

//example
 www.example.in#latest
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

Collapse
 
peerreynders profile image
peerreynders
const url = new URL(
  'http://tim:secret@wwww.example.com: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 ]
Enter fullscreen mode Exit fullscreen mode

MDN: URL

The naming is largely inspired by

Collapse
 
ndrohith profile image
Rohith ND Author

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.

Collapse
 
diballesteros profile image
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)

Collapse
 
dulranga profile image
Dulranga Dhawanitha

Nice Explanation !!
Keep it up.

Collapse
 
vulcanwm profile image
Medea

Nicely explained!

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.