A URL (Uniform Resource Locator) is the address used to identify resources on the web.

URL Anatomy

https://www.example.com:443/path/to/page?name=alice&age=25#section
|____| |______________||__| |_____________|  |________________| |_______|
scheme   hostname     port      path            query           fragment

scheme:    Protocol (http, https, ftp, mailto)
hostname:  Domain name or IP address
port:      Network port (optional)
path:      Resource location on server
query:     Key-value parameters
fragment:  In-page anchor reference

Examples

https://www.google.com/search?q=cats
https://localhost:3000/api/users
https://example.com:443/page#section
ftp://files.example.com/documents/report.pdf
mailto:user@example.com
javascript:alert('hello')

Scheme Types

Scheme	Purpose	Default Port
http	Unencrypted web	80
https	Encrypted web	443
ftp	File transfer	21
ssh	Secure shell	22
mailto	Email	—
file	Local file	—

Path Segments

https://example.com/users/123/posts/456
                 |_____| |___| |____| |___|
                 resource type ID  resource type ID

RESTful API pattern:
GET /users          → list users
GET /users/123      → get user 123
POST /users         → create user
PUT /users/123      → update user 123
DELETE /users/123   → delete user 123

Query parameters pass data to the server. Fragments navigate within a page.

Query Parameters

https://example.com/search?category=books&page=2&sort=price
                 |______| |_______________________________________________|
                  path              query string

Structure:
?key1=value1&key2=value2&key3=value3
|  separator  |   ampersand separator

Common Query Parameter Patterns

// Simple parameters
https://example.com/page?name=alice

// Multiple values for same key
https://example.com/page?color=red&color=blue

// Encoded values
https://example.com/search?q=hello+world%21
// hello world! → hello+world%21

// Empty values
https://example.com/page?name=&age=25

// Array notation (backend convention)
https://example.com/page?ids[]=1&ids[]=2&ids[]=3

Fragments (Anchors)

https://example.com/page#section-name
                 |____| |___________|
                  path   fragment

Fragment behavior:
- Not sent to server
- Used for in-page navigation
- JavaScript can read with window.location.hash
- Modern: scroll-behavior: smooth with id attributes

JavaScript URL API

const url = new URL('https://example.com/page?name=alice&age=25#top');

url.protocol    // 'https:'
url.hostname    // 'example.com'
url.pathname    // '/page'
url.search      // '?name=alice&age=25'
url.hash        // '#top'
url.origin      // 'https://example.com'

// Get query parameters
url.searchParams.get('name')   // 'alice'
url.searchParams.get('age')    // '25'
url.searchParams.getAll('color') // ['red', 'blue']

// Modify URL
url.searchParams.set('page', '2');
url.searchParams.append('sort', 'name');
url.searchParams.delete('age');

// Build URL programmatically
const newUrl = new URL('https://example.com/api');
newUrl.searchParams.set('q', 'search term');
// Result: https://example.com/api?q=search+term

URL encoding (percent-encoding) converts special characters into a format that can be transmitted over the internet.

Why URL Encoding?

URLs can only contain ASCII characters. Special characters must be encoded:

Space    → %20 or +
!        → %21
#        → %23
&        → %26
/        → %2F
:        → %3A
?        → %3F
@        → %40
=        → %3D
+        → %2B
%        → %25

Encoding Rules

Unreserved characters (safe):
A-Z a-z 0-9 - _ . ~

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

Space is special:
- In query string: + or %20
- In path: %20

JavaScript Encoding

// Encode/Decode URLs
encodeURIComponent('hello world!');  // 'hello%20world%21'
decodeURIComponent('hello%20world%21');  // 'hello world!'

// Encode/Decode query strings
encodeURI('https://example.com/path with spaces');
// 'https://example.com/path%20with%20spaces'

decodeURI('https://example.com/path%20with%20spaces');
// 'https://example.com/path with spaces'

// Difference:
encodeURIComponent('https://example.com');
// 'https%3A%2F%2Fexample.com' (encodes everything)

encodeURI('https://example.com');
// 'https://example.com' (preserves protocol)

When to Use Each

Function	Use Case
encodeURI()	Encoding a full URL
encodeURIComponent()	Encoding a URL component (query param, path segment)
decodeURI()	Decoding a full URL
decodeURIComponent()	Decoding a URL component

Common Mistakes

// WRONG: Double encoding
const query = encodeURIComponent(encodeURIComponent('hello world'));
// Results in 'hello%2520world' instead of 'hello%20world'

// WRONG: Not encoding user input
const url = `/search?q=${userInput}`;  // XSS risk!

// RIGHT: Always encode user input
const url = `/search?q=${encodeURIComponent(userInput)}`;