DEV Community

Rohith ND
Rohith ND

Posted on

8 4

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

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

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
 
dulranga profile image
Dulranga Dhawanitha

Nice Explanation !!
Keep it up.

Collapse
 
vulcanwm profile image
Medea

Nicely explained!

AI Agent image

How to Build an AI Agent with Semantic Kernel (and More!)

Join Developer Advocate Luce Carter for a hands-on tutorial on building an AI-powered dinner recommendation agent. Discover how to integrate Microsoft Semantic Kernel, MongoDB Atlas, C#, and OpenAI for ingredient checks and smart restaurant suggestions.

Watch the video 📺

👋 Kindness is contagious

Dive into this insightful write-up, celebrated within the collaborative DEV Community. Developers at any stage are invited to contribute and elevate our shared skills.

A simple "thank you" can boost someone’s spirits—leave your kudos in the comments!

On DEV, exchanging ideas fuels progress and deepens our connections. If this post helped you, a brief note of thanks goes a long way.

Okay