正在加载,请稍候…

URL Structure Explained: Parse and Understand Any URL

Learn the anatomy of a URL: protocol, host, port, path, query string, and fragment. Parse any URL instantly.

What Is a URL?

A URL (Uniform Resource Locator) is a reference to a web resource that specifies its location and the mechanism for retrieving it. Every URL follows a standardized structure defined in RFC 3986.

Understanding URL structure is fundamental for web development, API design, security analysis, and debugging network issues.

The Anatomy of a URL

https://user:password@www.example.com:8080/path/to/page?key=value&foo=bar#section
│─────││───────────────────────────││──││─────────────││────────────││──────│
scheme     authority (userinfo+host+port)    path         query      fragment

Breaking it down:

Component Example Purpose
Scheme https Protocol to use (http, https, ftp, mailto, file)
User Info user:password Optional credentials (rarely used, insecure)
Host www.example.com Domain name or IP address
Port 8080 Network port (omit for defaults: 80=HTTP, 443=HTTPS)
Path /path/to/page Location of the resource on the server
Query key=value&foo=bar Additional parameters (key-value pairs)
Fragment #section Client-side anchor (never sent to server)

URL Schemes

Scheme Protocol Example
http Hypertext Transfer http://example.com
https Secure HTTP https://example.com
ftp File Transfer ftp://files.example.com
mailto Email mailto:user@example.com
file Local file file:///home/user/doc.txt
ws WebSocket ws://chat.example.com/socket
wss Secure WebSocket wss://chat.example.com/socket
data Inline data data:text/plain;base64,SGVsbG8=

Absolute vs Relative URLs

Absolute URLs contain the full specification including scheme and host:

https://www.example.com/about

Relative URLs are resolved relative to a base URL:

/about              -> absolute path from root
../images/logo.png  -> relative to current directory
?page=2             -> same path, different query
#section-2          -> same page, different fragment

Query String Parsing

Query strings encode key-value pairs after the ?. Multiple pairs are separated by &. Special characters must be percent-encoded.

// Parse URL in JavaScript
const url = new URL('https://example.com/search?q=hello world&page=2');

url.hostname       // 'example.com'
url.pathname       // '/search'
url.search         // '?q=hello%20world&page=2'
url.searchParams.get('q')    // 'hello world' (auto-decoded)
url.searchParams.get('page') // '2'

// Build URL with query params
const url2 = new URL('https://api.example.com/users');
url2.searchParams.set('limit', '20');
url2.searchParams.set('sort', 'name');
url2.toString() // 'https://api.example.com/users?limit=20&sort=name'

URL Normalization

The same resource can be referenced by multiple URL forms. Normalization converts URLs to a canonical form:

http://Example.COM/index.html    ->  http://example.com/index.html  (lowercase host)
http://example.com:80/page       ->  http://example.com/page        (remove default port)
http://example.com/a/../b/./c   ->  http://example.com/b/c         (resolve path)
http://example.com/page?b=2&a=1 ->  http://example.com/page?a=1&b=2 (sort params)

URL Security Considerations

Open redirects: If your application uses a URL parameter to redirect users, validate it strictly. https://yourapp.com/login?next=https://evil.com can redirect to a phishing site.

URL injection: URLs in SQL queries or log files can contain payloads. Always validate and encode URLs from user input.

Fragment-based attacks: The URL fragment (#hash) is never sent to the server, making it invisible to server-side security controls. Be careful with client-side routing that uses fragments.

Punycode homograph attacks: аpple.com (Cyrillic a) looks identical to apple.com (Latin a) in some fonts. Always display decoded, normalized URLs to users.

Using This Tool

Paste any URL to instantly parse and display each component separately: scheme, host, port, path, query parameters (displayed as a table), and fragment. Useful for debugging complex URLs, extracting query parameters, and understanding URL structure.

-> Try the URL Parser