URLs

1. What is a URL?

A URL is a standardized address that tells your browser (or any client) exactly where a resource lives and how to retrieve it. It answers two questions: where is it? and how do I get there?

But URL is just one type of a broader concept. Let's clarify the terminology:

• URI (Uniform Resource Identifier) — the umbrella term for any string that identifies a resource. Every URL and every URN is a URI.
• URL (Uniform Resource Locator) — a URI that tells you how to get the resource (includes a scheme like https://). This is what we use on the web.
• URN (Uniform Resource Name) — a URI that names a resource without telling you how to access it (e.g., urn:isbn:978-0-13-468599-1).

2. URL Anatomy: The Five Components

Every URL can be broken down into up to five components. Here's a complete URL with all five parts:

Most URLs you encounter won't have all five parts. A simple URL like https://example.com/about has just scheme, authority, and path. The query and fragment are optional and used only when needed.

Try it live: explore any URL with the URL Explorer tool.

3. Scheme (Protocol)

The scheme is the first part of a URL and tells the client how to retrieve the resource — what protocol to use. It appears before the :// separator.

Web Schemes

Communication Schemes

Other Schemes

App-specific schemes: Applications can register their own schemes for deep linking: slack://, spotify://, vscode://, zoommtg://. These open the native app directly from a browser link.

4. Authority: Host and Port

The authority component tells the client which server to connect to. It consists of a host (required) and an optional port number.

Host

The host can be a domain name (example.com) or an IP address (93.184.216.34). Domain names are what humans use; IP addresses are what computers use. DNS (Domain Name System) translates between them.

Subdomains add hierarchy before the main domain:

• www.example.com — the traditional web subdomain
• api.example.com — API server
• blog.example.com — blog subdomain
• mail.example.com — mail server

Port

The port specifies which service on the server to connect to. Each scheme has a default port, so you usually don't need to specify it.

You only need to specify the port when it's not the default — for example, a development server running on port 3000: http://localhost:3000.

5. Path

The path identifies which resource on the server you're requesting. It follows the authority and uses / to separate hierarchical segments — similar to a filesystem directory structure.

Case Sensitivity

Domain names are case-insensitive (Example.COM = example.com), but paths are case-sensitive on most servers:

• Linux/Unix servers: /About and /about are different resources
• Windows servers (IIS): /About and /about are the same

Trailing Slash Conventions

• /products/ (with trailing slash) — traditionally implies a directory or collection
• /products (without trailing slash) — traditionally implies a file or resource

In practice, most web servers and frameworks treat both the same. But be consistent — having both versions serve different content confuses search engines and users.

File Extensions

Early web URLs included file extensions (.html, .php, .asp). Modern best practice is to omit them — Tim Berners-Lee himself argues that file extensions in URLs are a mistake because they expose implementation details and make URLs fragile if you change technologies.

6. Query String

The query string begins with ? and contains key-value pairs separated by &. It's how you pass additional parameters to the server — for search, filtering, sorting, and pagination.

Common Query String Patterns

Query strings are used with GET requests. The data is visible in the URL, which means it shows up in browser history, server logs, and the Referer header when you navigate away.

7. Fragment Identifier

The fragment starts with # and points to a specific location within a resource. The critical fact about fragments: they are never sent to the server.

Uses of Fragments

• Page sections: #introduction, #chapter3 — scrolls to an element with that id
• Tab content: #settings, #profile — show a specific tab
• SPA routing: #/users/42 — hash-based routing in single-page apps (changing the hash doesn't trigger a page reload)

Because fragments are handled entirely by the browser, changing the fragment doesn't cause a new request to the server. This is why early single-page applications used hash-based routing — it let them update the URL without reloading the page.

8. Absolute vs Relative URLs

An absolute URL contains the full address including the scheme: https://example.com/assets/urls/logo.png. A relative URL is a partial address that gets resolved against the current document's URL.

Types of Relative URLs

URL Resolution Examples

Given a base URL of https://example.com/blog/posts/article.html:

The <base> Tag

HTML provides a <base> tag that changes the base URL for all relative URLs on the page:

Gotcha: <base> affects all relative URLs on the page, including links and fragment references. A link to #section will navigate to the base URL plus #section, not the current page. Use <base> sparingly.

Protocol-Relative URLs

URLs starting with (like //cdn.example.com/lib.js) inherit the scheme from the current page. These were popular when sites supported both HTTP and HTTPS, but now that HTTPS is the standard, they're unnecessary.

Best Practices

• Root-relative (/assets/urls/logo.png) for site-wide assets — works from any page depth
• Document-relative (../styles/main.css) for resources that move with the document
• Absolute (https://cdn.example.com/lib.js) for external resources

9. URL Encoding (Percent-Encoding)

URLs can only contain a limited set of ASCII characters. Any other characters — spaces, special symbols, international characters — must be percent-encoded: converted to their UTF-8 byte values and represented as %XX sequences.

How It Works

Character Categories

Unreserved characters (never need encoding):

A-Z a-z 0-9 - _ . ~

Reserved characters (have special meaning in URLs; encode only when used as data):

: / ? # [ ] @ ! $ & ' ( ) * + , ; =

Everything else (must always be encoded):

Spaces, < > { } | \ ^ ` ", and all non-ASCII characters

Common Encodings

JavaScript Encoding Functions

The Space Problem: %20 vs +

Spaces can be encoded two ways:

• %20 — standard percent-encoding (used in paths and most contexts)
• + — only valid in query strings of application/x-www-form-urlencoded data (HTML form submissions)

When in doubt, use %20. It's always correct.

International Characters

Non-ASCII characters are encoded as their UTF-8 byte sequences:

10. Data URIs

Data URIs embed resource content directly in the URL itself, using the data: scheme. Instead of fetching a file from a server, the data is included inline. This eliminates the HTTP request entirely.

Syntax

Common MIME Types for Data URIs

When to Use Data URIs

• Use for: Small icons, critical above-the-fold images, CSS backgrounds for tiny images, favicons
• Don't use for: Large images (base64 adds ~33% size), resources that benefit from caching (data URIs can't be cached independently), resources shared across pages

Base64 encoding increases the data size by approximately 33%. A 3 KB icon becomes ~4 KB as a data URI. For small resources where eliminating the HTTP request overhead is worth the size increase, data URIs make sense. For anything larger, a separate file with proper caching is better.

11. URLs and State Management

HTTP is stateless — each request is independent. Yet URLs can carry state, making them one of the oldest and most powerful state management mechanisms on the web.

State in Query Parameters

Query parameters make state shareable and bookmarkable. When a user searches, filters, or navigates, encoding that state in the URL means they can share the exact view with someone else.

The History API

Modern browsers provide the History API, which lets JavaScript update the URL without triggering a page reload:

Hash Routing vs History API Routing

What Belongs in URLs vs What Doesn't

• Put in URLs: Search terms, filter criteria, pagination, sort order, selected tab/view — anything a user should be able to share or bookmark
• Don't put in URLs: User preferences, authentication tokens, temporary UI state (modal open/closed), shopping cart contents

12. URL Security

URLs are user-controllable input. Any part of a URL — path, query parameters, fragments — can be manipulated by an attacker. Never trust URLs without validation.

Common URL-Based Attacks

URL Validation

Sensitive Data in URLs

URLs are exposed in many places you might not expect:

• Browser history — anyone with access to the device can see them
• Server logs — access logs record full URLs (including query strings)
• Referer header — when you click a link, the full URL of the current page is sent to the next site
• Proxy logs — corporate proxies and network monitors log URLs
• Browser bookmarks — bookmarked URLs may be synced to cloud services

13. Cool URIs Don't Change

In 1998, Tim Berners-Lee wrote an influential essay with a simple thesis: good URLs should last forever.

"What makes a cool URI? A cool URI is one which does not change. What sorts of URI change? URIs don't change: people change them."
— Tim Berners-Lee, Cool URIs Don't Change (1998)

Link Rot Is Real

Studies show that approximately 25% of links in academic papers are dead within 7 years. The average half-life of a web page URL is about 2 years. Every broken link is a broken promise.

What Causes URLs to Break

• Technology in the URL: /page.asp breaks when you switch from ASP to PHP
• Organizational structure: /marketing/campaigns/ breaks when you reorganize departments
• Date-based with reclassification: Moving a blog post from one category to another
• File extensions: .html → .php → no extension
• Server migration: New CMS, new URL patterns

Design Principles for Lasting URLs

When URLs Must Change: Redirects

• 301 Moved Permanently: The URL has a new permanent home. Browsers, search engines, and bookmarks update automatically.
• 410 Gone: The resource has been intentionally and permanently removed. More honest than a 404.
• Archive rather than delete: If content is outdated, add a notice rather than removing it.

14. URLs as Interface

Jakob Nielsen observed that URLs are part of the user interface. Users read them, edit them, share them, and judge trustworthiness by them. A good URL is readable, predictable, and hackable.

Readable

• Use real words, not IDs or codes: /products/running-shoes not /p/RS-42X
• Use hyphens to separate words: /blog/url-design-tips not /blog/url_design_tips
• Use lowercase exclusively: /about-us not /About-Us
• Keep URLs concise: every segment should add meaning

Predictable

Users should be able to guess URLs based on consistent patterns:

Hackable

Users should be able to navigate by editing the URL:

• Remove the last segment to go "up": /products/shoes/running → /products/shoes → /products
• Change a parameter to explore: /search?q=python → /search?q=javascript
• Guess related pages: if /blog exists, /about probably does too

URL Design Patterns

15. The URL API in JavaScript

Modern JavaScript provides a built-in URL class for parsing, constructing, and manipulating URLs. It handles encoding, validation, and edge cases that string manipulation gets wrong.

URL Constructor

URL Properties

URLSearchParams

URL Validation

Common Patterns

16. Summary