DEV Community

Rohith ND
Rohith ND

Posted on

Structure of URL

#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 •

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
 
vulcanwm profile image
Medea •

Nicely explained!

Collapse
 
dulranga profile image
Dulranga Dhawanitha •

Nice Explanation !!
Keep it up.