Breaking down a URL

Let's dissect a complete URL piece by piece:

https://www.example.com:443/products/shoes?color=red&size=42#reviews

ProtocolWhat is protocol?An agreed-upon set of rules for how two systems communicate, defining the format of messages and the expected sequence of exchanges. Ask AI for more: the rules of communication

The protocol tells the browser how to talk to the server:

• HTTPWhat is http?The protocol browsers and servers use to exchange web pages, API data, and other resources, defining how requests and responses are formatted. Ask AI for more = HyperText Transfer Protocol (unencrypted, avoid for sensitive data)
• HTTPSWhat is https?HTTP with encryption added, so data traveling between your browser and a server can't be read or tampered with by anyone in between. Ask AI for more = HTTP Secure (encrypted with SSL/TLSWhat is ssl/tls?Encryption protocols that secure the connection between a browser and a server, preventing eavesdropping on data in transit. Ask AI for more)

Always use HTTPS. It protects passwords, personal data, and prevents attackers from intercepting your communication. When you see the lock icon in your browser, you're using HTTPS.

Other protocols you might see

Domain: finding the right computer

The domain identifies which server to contact. It's hierarchical, reading from right to left:

www.example.com
└──┬──┘ └──┬──┘ └─┬─┘
   │      │      └── Top-level domain (TLD)
   │      └───────── Domain name
   └──────────────── Subdomain

• .com = top-level domain (TLDWhat is tld?Top-Level Domain - the last segment of a domain name (.com, .org, .fr), indicating the domain's type or country. Ask AI for more), indicates the type of site
• example = domain name, the registered name
• www = subdomainWhat is subdomain?A prefix to a domain (api.example.com, blog.example.com) that routes to a distinct service or section of a site. Ask AI for more, often used for the main website

DNSWhat is dns?The system that translates human-readable domain names like google.com into the numerical IP addresses computers use to find each other. Ask AI for more (Domain Name System) translates this human-readable name into an IP addressWhat is ip address?A numerical label (e.g., 172.217.14.206) that identifies a device on a network - DNS translates domain names into IP addresses. Ask AI for more that computers understand. You type google.com, DNS tells your browser 172.217.14.206.

Subdomains in practice

Subdomains let organizations organize different services:

Port: which door to knock on

Ports are like doors on a building. Each service listens on a specific port. They're usually hidden because browsers use sensible defaults:

You mostly see ports during development: localhost:3000 means "my own computer, port 3000."

Path: locating the resource

The path specifies which resource you want on the server:

/products/shoes/nike-air-max

It's like folders on your computer. The server decides what to return for each path. RESTWhat is rest?An architectural style for web APIs where URLs represent resources (nouns) and HTTP methods (GET, POST, PUT, DELETE) represent actions on those resources. Ask AI for more APIs use paths to organize endpoints logically:

Query parameters: sending extra data

Query parameters let you send additional information to the server:

?color=red&size=42&sort=price

They start with ?, use key=value format, and multiple params are separated by &.

Common use cases:

URL encoding

Special characters in URLs must be "percent-encoded":

Working with URLs in JavaScript

// Parse a URL
const url = new URL('https://example.com/search?q=react&page=2');

console.log(url.protocol);  // 'https:'
console.log(url.hostname);  // 'example.com'
console.log(url.pathname);  // '/search'
console.log(url.search);    // '?q=react&page=2'

// Build a URL programmatically - much safer than string concatenation
const apiUrl = new URL('https://api.example.com/users');
apiUrl.searchParams.set('limit', '10');
apiUrl.searchParams.set('sort', 'name');
console.log(apiUrl.toString());
// 'https://api.example.com/users?limit=10&sort=name'

FragmentWhat is fragment?A React wrapper (<></>) that groups multiple elements without adding an extra HTML node to the page. Ask AI for more: browser-only navigation

The fragment (everything after #) is special, it's never sent to the server:

https://docs.example.com/guide#installation

The browser uses it for:

• Jumping to sections on the same page
• Single-page app routing (React Router, Vue Router)
• Tab navigation within a page

Because it's browser-only, you can't use fragments to send data to the server. They're purely for client-side navigation.

URL best practices

Do:

• Use HTTPSWhat is https?HTTP with encryption added, so data traveling between your browser and a server can't be read or tampered with by anyone in between. Ask AI for more for anything involving passwords or personal data
• Keep URLs readable and meaningful
• Use query params for optional filters, not required data
• URL-encode special characters in values

Don't:

• Put sensitive data (passwords, APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more keys) in URLs, they get logged by servers and browser history
• Create extremely long URLs, they break in email clients and some systems
• Change URLs without redirects, you'll break bookmarks and SEO

Quick reference