URL Encoding Explained: Why %20 Means Space

URLs can only contain a limited set of ASCII characters. Anything outside that — spaces, special characters, non-English text — needs to be encoded. Understanding URL encoding prevents broken links and subtle bugs.

What is URL encoding?

URL encoding (also called percent-encoding) replaces unsafe characters with a % followed by two hex digits representing the character’s ASCII code:

Why encoding is necessary

URLs use certain characters as delimiters:

• ? separates the path from query parameters
• & separates query parameters
• = separates keys from values
• # marks the fragment (anchor)
• / separates path segments

If your data contains these characters, they’ll be misinterpreted:

# Without encoding (BROKEN):
https://example.com/search?q=rock & roll&page=1
# Browser thinks: q=rock, separate parameter " roll", page=1

# With encoding (CORRECT):
https://example.com/search?q=rock%20%26%20roll&page=1

What needs encoding

Always encode in query values:

• Spaces, &, =, +, #, %, and any non-ASCII characters

Don’t encode:

• Unreserved characters: A-Z, a-z, 0-9, -, _, ., ~
• Path delimiters (when used as delimiters): /, ?, #

Space encoding: %20 vs +

Both represent a space, but in different contexts:

• %20 — Standard percent-encoding. Used in path segments and anywhere in the URL
• + — Only valid in query string values (application/x-www-form-urlencoded). Used by HTML forms

# Path: use %20
/files/my%20document.pdf

# Query: + is common
/search?q=hello+world

# Both work in queries:
/search?q=hello%20world

Double encoding pitfalls

A common bug: encoding an already-encoded URL.

# Original
hello world

# Encoded once (correct)
hello%20world

# Encoded twice (broken)
hello%2520world

%25 is the encoding of % itself. If you see %25 in URLs, something was encoded twice.

International characters (IDN)

Non-ASCII characters in domain names use Punycode:

münchen.de → xn--mnchen-3ya.de

Non-ASCII characters in paths and queries use UTF-8 percent-encoding:

/café → /caf%C3%A9

Common scenarios

Building API URLs

const query = 'price > 100 & category = "books"';
const url = `/api/search?q=${encodeURIComponent(query)}`;
// /api/search?q=price%20%3E%20100%20%26%20category%20%3D%20%22books%22

Decoding log entries

Server logs often show encoded URLs. Decoding them makes them readable.

Sharing URLs with special characters

Copy-paste a URL containing special characters — the browser auto-encodes for you, but verifying the encoding helps debug issues.

A URL encoder/decoder tool handles both directions instantly — paste a URL to decode it to readable text, or paste text to get a properly encoded URL component.