URL Encoding Guide: Complete Guide to Percent Encoding

If you've ever seen %20 in a URL and wondered what it means — or worse, had a URL break because of a special character — this guide is for you. URL encoding (also called percent encoding) is one of those fundamental web technologies that every developer encounters, but few fully understand.

By the end of this guide, you'll know exactly how URL encoding works, when to use encodeURIComponent() vs encodeURI(), how to avoid the top 5 URL encoding bugs, and how to handle encoding in JavaScript, Python, PHP, Java, and Go.

What is URL Encoding?

URL encoding (officially called percent-encoding per RFC 3986) is a mechanism for converting characters into a format that can be safely transmitted in URLs. Since URLs can only contain a limited set of ASCII characters, anything outside that set must be "encoded" using a % followed by two hexadecimal digits.

Example conversions:

Raw Character	Encoded	Why
Space	%20	Not allowed in URLs
&	%26	Reserved — query parameter separator
=	%3D	Reserved — key-value separator
#	%23	Reserved — fragment identifier
@	%40	Reserved — auth info
é	%C3%A9	Non-ASCII (UTF-8 bytes)
🚀	%F0%9F%9A%80	Emoji (UTF-8 bytes)

Why URL Encoding Matters in 2026

URL encoding isn't just a theoretical concept — it directly affects your application's reliability:

• Prevents broken URLs — A parameter like "rock & roll" breaks the URL without encoding the & because the browser interprets & as a parameter separator.
• Security — Proper encoding prevents injection attacks by neutralizing special characters before they reach your server.
• International characters — Non-ASCII characters (Chinese, Arabic, emoji) must be encoded using UTF-8 byte sequences. As of 2026, over 35% of URLs on the web contain encoded non-ASCII characters (HTTP Archive).
• Data integrity — URLs pass through proxies, load balancers, and logging systems; encoding ensures nothing gets corrupted along the way.

How Percent Encoding Works

The algorithm is straightforward:

1. Check if the character needs encoding (anything outside A-Z a-z 0-9 - _ . ~)
2. Convert the character to its UTF-8 byte sequence
3. Express each byte as %XX where XX is the two-digit hexadecimal value

Example: Encoding "café"

Character Categories (RFC 3986)

Category	Characters	Rule
Unreserved	A-Z a-z 0-9 - _ . ~	Never need encoding
Reserved	: / ? # [ ] @ ! $ & ' ( ) * + , ; =	Encode when used as data, not as delimiters
Other	Spaces, non-ASCII, control characters	Always encode

Common Character Encodings Reference

Raw	Encoded	Notes
Space	%20	Most commonly encountered encoding
!	%21
"	%22
#	%23	Fragment identifier — always encode in query params
%	%25	Must encode % — otherwise interpreted as encoding start
&	%26	Parameter separator — one of the most common bugs
'	%27
( )	%28 %29
+	%2B	Literal plus sign (not a space!)
,	%2C
/	%2F	Path separator — careful encoding this
:	%3A
;	%3B
< >	%3C %3E
=	%3D	Key-value separator
?	%3F	Query string start
@	%40
[ \ ]	%5B %5C %5D
{ | }	%7B %7C %7D

%20 vs +: The Space Encoding Confusion

One of the most common points of confusion: should a space be %20 or +?

Context	Encoding	Why
URL paths (/my file.txt)	%20	+ is a literal plus sign in paths
Query strings (?q=hello world)	%20 or +	+ comes from HTML form encoding (application/x-www-form-urlencoded)

Best practice: Use %20 universally in modern applications. Only use + if you're specifically handling legacy HTML form submissions.

JavaScript: encodeURI vs encodeURIComponent

This is the most common URL encoding mistake in JavaScript. The two functions behave very differently:

Function	Encodes	Best For
encodeURI()	Everything except : // ? # & = + $ , / : @	Complete URLs — preserves structure
encodeURIComponent()	Everything except A-Z a-z 0-9 - _ . ! ~ * ' ( )	Parameter values & path segments — encodes ALL special chars

Language-Specific Examples

Python

PHP

Java

Go

Top 5 URL Encoding Bugs (and How to Fix Them)

1. 🔴 Double Encoding

Fix: Always decode before re-encoding. Never encode an already-encoded string.

2. 🔴 Using encodeURI() Instead of encodeURIComponent()

This is the #1 JavaScript URL encoding mistake. encodeURI() does NOT encode &, =, or ?, which breaks query parameters.

Fix: Use encodeURIComponent() for parameter values — always.

3. 🔴 Not Encoding at All (Template Literal Injection)

4. 🔴 Confusing %20 and + in Paths

In URL paths, + is a literal plus sign — NOT a space. This causes file-not-found errors.

Fix: Use %20 everywhere. Reserve + for legacy form data only.

5. 🔴 Forgetting Non-ASCII Characters

Modern browsers display decoded characters in the address bar (you see café not caf%C3%A9), but the actual HTTP request still uses percent encoding. Always encode in your code — never assume the browser will handle it.

Best Practices (2026)

1. Always encode user input before inserting it into a URL — never trust raw data.
2. Use encodeURIComponent() for parameter values, never encodeURI().
3. Use URLSearchParams (JavaScript) or equivalent in modern code for automatic encoding.
4. Never double-encode — track whether a string is already encoded.
5. Use %20 for spaces, not +, unless handling legacy form submissions.
6. Use UTF-8 consistently — modern browsers and servers default to UTF-8, but legacy systems may not.
7. When embedding a URL in HTML (e.g., href attribute), apply both URL encoding (for URL data) and HTML encoding (for the attribute value).

Try Our URL Encoder Tool

Need to quickly encode or decode a URL? Use our free online tool — no signup required, all processing happens in your browser.

If you found this guide helpful, check out our other developer tutorials or use our free online text tools.