DevTools Logo

URL Structure & Parsing Cheat Sheet

URL anatomy (scheme, host, port, path, query, fragment), encoding rules, and parsing across languages.

Web & Network
url
uri
parsing

A URL is a structured string with a defined grammar. Understanding its parts lets you parse, build, and validate links correctly instead of string-splitting by hand.

Anatomy

code
https://user:pass@example.com:443/path/to?query=1&sort=asc#fragment
\____/   \_______________/ \__/ \_______/ \____________/ \______/
scheme     authority       port   path        query        fragment
Table
PartExample
Schemehttps
Username/passworduser:pass
Hostexample.com
Port443
Path/path/to
Queryquery=1&sort=asc
Fragmentfragment

Percent-encoding

Table
CharacterEncoded
Space%20
#%23
&%26
?%3F
/ (in query)%2F
= (in query)%3D

Use encodeURIComponent for values, not encodeURI (which leaves &, =, ? intact).

Parsing in JavaScript

js
const u = new URL("https://example.com:443/path?q=1#frag");
u.protocol; // "https:"
u.hostname;  // "example.com"
u.port;      // ""
u.pathname;  // "/path"
u.search;    // "?q=1"
u.hash;      // "#frag"

const p = new URLSearchParams("q=1&sort=asc");
p.get("q");     // "1"
p.has("sort");  // true

Parsing in Python

python
from urllib.parse import urlparse, parse_qs, urlencode

u = urlparse("https://example.com/path?q=1")
u.scheme   # "https"
u.netloc   # "example.com"
u.path     # "/path"
parse_qs(u.query)  # {"q": ["1"]}
urlencode({"q": 1, "sort": "asc"})  # "q=1&sort=asc"

References

Related tools