URL Encoding Demystified: Why %20 Exists and What It Means

You've seen it everywhere: %20 instead of spaces, %3A instead of colons, %F0%9F%9A%80 instead of a rocket emoji. URL encoding (formally called "percent-encoding") is the internet's way of squeezing arbitrary characters into the limited character set that URLs support.

It looks messy, but there's a clean logic behind it. Understanding percent-encoding helps you debug broken links, build APIs, and avoid the subtle bugs that happen when special characters slip through unencoded.

Why URLs Need Encoding at All

URLs can only safely contain a small set of ASCII characters: letters, digits, and a handful of symbols (-, _, ., ~). Characters like spaces, &, =, /, and ? have special structural meaning in URLs. If your data contains any of these, you need to encode them to avoid ambiguity.

Consider this URL: https://example.com/search?q=rock & roll. Is "& roll" a second query parameter or part of the search term? The browser can't tell. Encoding it as q=rock%20%26%20roll removes all ambiguity.

How Percent-Encoding Works

The algorithm is simple: take the character's UTF-8 byte representation, then write each byte as % followed by two hexadecimal digits. A space (byte 0x20) becomes %20. A copyright symbol © (bytes 0xC2 0xA9) becomes %C2%A9. A rocket emoji 🚀 (bytes 0xF0 0x9F 0x9A 0x80) becomes %F0%9F%9A%80.

// JavaScript provides two built-in functions:

// encodeURIComponent — encodes EVERYTHING except A-Z a-z 0-9 - _ . ~
encodeURIComponent("hello world")  // "hello%20world"
encodeURIComponent("price=10&qty=2") // "price%3D10%26qty%3D2"

// encodeURI — preserves URL structure characters (: / ? # & =)
encodeURI("https://example.com/path?q=hello world")
// "https://example.com/path?q=hello%20world"

encodeURIComponent vs. encodeURI: The Critical Difference

This is where most bugs happen. Use the wrong function and you either break the URL structure or fail to encode dangerous characters.

A common mistake: using encodeURI() on a query value that contains &. Since encodeURI preserves &, the value gets interpreted as a parameter separator. Use encodeURIComponent() and the & becomes %26, which is safely treated as data.

Base64URL: The Third Encoding You Should Know

Standard Base64 uses +, /, and = characters — all of which have special meaning in URLs. Base64URL replaces + with -, / with _, and drops the = padding. It's used extensively in JWTs (JSON Web Tokens), OAuth, and anywhere binary data needs to travel safely through URLs.

Our URL Encoder/Decoder tool supports all three modes: Component encoding (encodeURIComponent), Full URL encoding (encodeURI), and Base64URL encoding. Switch between modes with one click and see the encoded/decoded result instantly.

Common Debugging Scenarios

1. Broken API calls — a query parameter contains an unencoded & that splits it into two parameters
2. Double encoding — encoding an already-encoded string turns %20 into %2520 (the % gets encoded again)
3. Garbled Unicode — non-UTF-8 encoding produces wrong percent sequences for international characters
4. Missing + handling — some servers treat + as a space (form encoding) while others treat it literally

When debugging, paste the suspicious URL into a decoder first. If you see %25 in the decoded output, you have a double-encoding problem. If international characters look wrong, check that both encoder and decoder agree on UTF-8.