URL Encoding Special Characters Explained

Why does a space become %20? Why does your API break when you pass an ampersand? Here's everything about URL encoding (percent encoding) in plain language.

What Is URL Encoding?

URL encoding (also called percent encoding) is a way to represent characters in a URL that would otherwise be invalid or ambiguous. It works by replacing unsafe characters with a % sign followed by two hexadecimal digits representing the character's byte value.

For example:

• Space → %20 (byte value 0x20 = 32 in ASCII)
• & → %26
• = → %3D
• @ → %40

This exists because URLs have a strict syntax where certain characters have special meanings. An & separates query parameters. An = separates keys from values. A / separates path segments. If your actual data contains these characters, they need to be encoded to avoid being misinterpreted.

Characters That Need Encoding

Characters That DON'T Need Encoding

These characters are "unreserved" and safe to use anywhere in a URL without encoding:

• Letters: A-Z, a-z
• Digits: 0-9
• Hyphen: -
• Underscore: _
• Period: .
• Tilde: ~

The Space Problem: %20 vs +

Spaces are the most commonly encoded character, and there are two ways to represent them:

• %20 — standard percent encoding, used in path segments
• + — used in query strings (form data), defined by application/x-www-form-urlencoded

// In a path: use %20
https://example.com/my%20file.pdf

// In a query string: + is also valid
https://example.com/search?q=hello+world
https://example.com/search?q=hello%20world  // Also valid

When in doubt, %20 works everywhere. + only works in query strings.

URL Encoding in Different Languages

JavaScript

// encodeURIComponent — for query parameter VALUES (most common)
encodeURIComponent('hello world & goodbye')
// "hello%20world%20%26%20goodbye"

// encodeURI — for complete URLs (preserves :, /, ?, #, etc.)
encodeURI('https://example.com/path?q=hello world')
// "https://example.com/path?q=hello%20world"

// Decode
decodeURIComponent('hello%20world')  // "hello world"
decodeURI('https://example.com/hello%20world')  // Preserves structure

Common mistake: Using encodeURI() when you mean encodeURIComponent(). If you're encoding a query parameter value, always use encodeURIComponent().

Python

from urllib.parse import quote, quote_plus, unquote

# quote — percent encoding (for path segments)
quote('hello world & goodbye')
# 'hello%20world%20%26%20goodbye'

# quote_plus — form encoding (spaces become +)
quote_plus('hello world & goodbye')
# 'hello+world+%26+goodbye'

# Full URL encoding
from urllib.parse import urlencode
params = {'q': 'hello world', 'lang': 'en'}
urlencode(params)
# 'q=hello+world&lang=en'

# Decode
unquote('hello%20world')  # 'hello world'

PHP

// urlencode — for query strings (spaces become +)
echo urlencode('hello world & goodbye');
// hello+world+%26+goodbye

// rawurlencode — for path segments (spaces become %20)
echo rawurlencode('hello world & goodbye');
// hello%20world%20%26%20goodbye

Command Line (curl)

# curl automatically encodes with --data-urlencode
curl -G 'https://api.example.com/search' \
  --data-urlencode 'q=hello world & goodbye'

# Manual encoding with Python
echo -n 'hello world' | python3 -c "import sys,urllib.parse; print(urllib.parse.quote(sys.stdin.read()))"

Unicode and International Characters

Non-ASCII characters (emoji, accented letters, CJK characters) are first encoded to UTF-8 bytes, then each byte is percent-encoded:

// The word "café"
café → UTF-8 bytes: 63 61 66 C3 A9 → caf%C3%A9

// Japanese "東京" (Tokyo)
東京 → UTF-8: E6 9D B1 E4 BA AC → %E6%9D%B1%E4%BA%AC

// Emoji "🚀"
🚀 → UTF-8: F0 9F 9A 80 → %F0%9F%9A%80

Common URL Encoding Mistakes

1. Double Encoding

Encoding an already-encoded string turns %20 into %2520. Always encode raw values, never encoded ones.

2. Encoding the Entire URL

Don't encode https:// or / separators. Only encode parameter values and path segments that contain special characters.

3. Forgetting to Encode + in Query Values

If your data literally contains a + sign (like "C++"), it must be encoded as %2B, or it will be interpreted as a space.

4. Not Encoding Ampersands in Values

If a parameter value contains &, it will be interpreted as a parameter separator unless encoded as %26.

Frequently Asked Questions

Why can't URLs just support all characters?

URLs were designed in the early 1990s for ASCII-only systems. The character restrictions allow URLs to be transmitted reliably through any system — email, HTML attributes, command lines — without ambiguity. Percent encoding is the bridge between this ASCII-only world and modern Unicode text.

What's the difference between encodeURI and encodeURIComponent?

encodeURI() encodes a complete URL, preserving characters like :, /, ?, #. encodeURIComponent() encodes everything except unreserved characters — use it for individual parameter values.

Do I need to URL-encode JSON in query parameters?

Yes. JSON contains {, }, ", :, and other characters that must be encoded. Better yet, send JSON in the request body instead of query parameters.

Related reading: URL Encoder & Decoder Guide · Query String Parser & Builder