Complete Guide to URL Encoding (Percent Encoding)

Published: October 7, 2026 · 7 min read · By JSON Suite Team

Ever seen %20 in a URL and wondered what it means? That's URL encoding in action — a critical concept for web developers working with APIs, forms, and query strings. This guide explains everything you need to know.

What is URL Encoding?

URL encoding (also called percent-encoding) is a method of converting characters into a format that can be safely transmitted in URLs. URLs can only contain a limited set of characters from the ASCII character set. Any character outside this safe set must be encoded.

The encoding format is simple: % followed by two hexadecimal digits representing the character's ASCII code. For example, a space (ASCII 32, hex 20) becomes %20.

Why URL Encoding Exists

URLs have reserved characters with special meanings:

? — starts the query string
& — separates query parameters
= — separates key from value
# — starts the fragment identifier
/ — separates path segments

If your data contains these characters, they must be encoded to prevent breaking the URL structure. For example, searching for "Tom & Jerry" requires encoding the & as %26.

Common Character Encodings

Character	Encoded	Description
Space	`%20` or `+`	Space character
`!`	`%21`	Exclamation mark
`#`	`%23`	Hash/pound sign
`$`	`%24`	Dollar sign
`%`	`%25`	Percent sign
`&`	`%26`	Ampersand
`+`	`%2B`	Plus sign
`/`	`%2F`	Forward slash
`=`	`%3D`	Equals sign
`?`	`%3F`	Question mark
`@`	`%40`	At sign

encodeURI vs encodeURIComponent

JavaScript provides two functions, and choosing the right one matters:

encodeURIComponent() — For Query Parameters

Encodes everything except: A-Z a-z 0-9 - _ . ! ~ * ' ( )

Use this for encoding values in query strings:

const searchTerm = "Tom & Jerry"; const url = `https://api.example.com/search?q=${encodeURIComponent(searchTerm)}`; // Result: https://api.example.com/search?q=Tom%20%26%20Jerry

encodeURI() — For Complete URLs

Preserves URL structure characters: : / ? # [ ] @ ! $ & ' ( ) * + , ; =

Use this when encoding an entire URL that's already properly formed:

const url = "https://example.com/path with spaces/file.html"; encodeURI(url); // Result: https://example.com/path%20with%20spaces/file.html

The Key Difference

const value = "hello?world"; encodeURIComponent(value); // "hello%3Fworld" (? is encoded) encodeURI(value); // "hello?world" (? is preserved) // Wrong: using encodeURI for query params `/search?q=${encodeURI("a&b")}` // /search?q=a&b ❌ BROKEN! // Right: using encodeURIComponent `/search?q=${encodeURIComponent("a&b")}` // /search?q=a%26b ✅

Form Encoding (application/x-www-form-urlencoded)

HTML forms use a slightly different encoding where spaces become + instead of %20. This is called "form encoding" or "application/x-www-form-urlencoded".

// Standard URL encoding "hello world" → "hello%20world" // Form encoding "hello world" → "hello+world"

Both formats decode to the same result. Most servers accept either, but be consistent within your application.

Unicode and UTF-8 Encoding

Non-ASCII characters (emojis, Chinese, Arabic, etc.) are first converted to UTF-8 bytes, then each byte is percent-encoded:

// Emoji "😀" (U+1F600) encodeURIComponent("😀"); // UTF-8 bytes: F0 9F 98 80 // Encoded: "%F0%9F%98%80" // Chinese "你好" encodeURIComponent("你好"); // "%E4%BD%A0%E5%A5%BD"

URL Encoding in Different Languages

// JavaScript encodeURIComponent("hello world") // "hello%20world" decodeURIComponent("hello%20world") // "hello world" # Python from urllib.parse import quote, unquote quote("hello world") # "hello%20world" unquote("hello%20world") # "hello world" # Python (form encoding with + for spaces) from urllib.parse import quote_plus, unquote_plus quote_plus("hello world") # "hello+world" // PHP urlencode("hello world"); // "hello+world" (form encoding) rawurlencode("hello world"); // "hello%20world" (RFC 3986) // Java URLEncoder.encode("hello world", "UTF-8"); // "hello+world" // Go url.QueryEscape("hello world") // "hello+world"

Common Mistakes to Avoid

Double encoding — Encoding an already-encoded string turns %20 into %2520. Always decode first if unsure.
Using encodeURI for query values — This leaves & and = unencoded, breaking your URL.
Forgetting to encode — User input in URLs can contain anything. Always encode dynamic values.
Mixing + and %20 — While both work for spaces, mixing them looks inconsistent. Pick one.

When to Use URL Encoding

Query string parameters — ?name=John%20Doe&city=New%20York
Form submissions — Browser encodes form data automatically
API requests — REST API parameters need encoding
Redirect URLs — URLs passed as parameters need encoding
OAuth callbacks — Redirect URIs must be encoded

URL Encoding vs Base64

These serve different purposes:

URL encoding — Makes text URL-safe. Output is human-readable. Use for query strings.
Base64 encoding — Converts binary to text. Output is not readable. Use for binary data in JSON or headers.

Try It Yourself

Need to encode or decode URLs quickly? Use our free URL Encoder/Decoder tool. It handles both standard URL encoding and form encoding, supports Unicode, and processes instantly in your browser.