You've seen URLs with strange %20 and %3D symbols. That's URL encoding. It's essential for passing data in URLs safely. Here's the complete guide.

Why URL Encoding?

URLs have strict character restrictions. Only these characters are allowed:

  • A-Z, a-z, 0-9
  • - (hyphen), _ (underscore), . (period), ~ (tilde)

Everything else must be encoded. Why? URLs are delimiters:

https://example.com/search?q=hello world

Is the space part of the search query or a URL separator? Ambiguous. Encoding fixes this:

https://example.com/search?q=hello%20world

URL Encoding Basics

How It Works

Each special character is replaced with %HH, where HH is its hex ASCII code:

space = ASCII 32 = 0x20 = %20
= = ASCII 61 = 0x3D = %3D
& = ASCII 38 = 0x26 = %26
# = ASCII 35 = 0x23 = %23
? = ASCII 63 = 0x3F = %3F
/ = ASCII 47 = 0x2F = %2F

Common Characters

space = %20 (or + in query strings)
! = %21
" = %22
# = %23
$ = %24
% = %25
& = %26
' = %27
( = %28
) = %29
* = %2A
+ = %2B
, = %2C
/ = %2F
: = %3A
; = %3B
= = %3D
? = %3F
@ = %40
[ = %5B
] = %5D

URL Encoding vs Form Encoding vs Percent Encoding

URL Encoding (percent encoding)

Used in URLs. Replaces spaces with %20.

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

Used in POST request bodies. Replaces spaces with + or %20.

JSON Encoding

No encoding needed; JSON handles special characters.

Parts of a URL

Different URL parts have different encoding rules:

Protocol

https:// — Not encoded

Domain

example.com — Not encoded (special ASCII only, use IDN for Unicode)

Path

/search/hello%20world — Encode spaces, special chars

Query String

?q=hello%20world&lang=en — Encode spaces, &, =, etc.

Fragment

#search — Generally not encoded

Encoding in Different Situations

User Input in Search

User types: "hello world"
Encoded: hello%20world
URL: example.com/search?q=hello%20world

Special Characters

User types: "what is 2+2?"
Encoded: what%20is%202%2B2%3F
URL: example.com/search?q=what%20is%202%2B2%3F

Unicode (Non-ASCII)

User types: "café"
UTF-8 bytes: c3 a9
Encoded: caf%C3%A9
URL: example.com/search?q=caf%C3%A9

Using Our URL Encoder

Use our URL Encoder/Decoder to instantly convert between:

  1. Paste text or URL
  2. Choose encode or decode
  3. Get result instantly
  4. Copy and use

Encoding in Code

JavaScript

// Encode single component
encodeURIComponent("hello world")  // "hello%20world"

// Encode full URL
encodeURI("https://example.com/hello world")  // safer version

Python

from urllib.parse import quote
quote("hello world")  # "hello%20world"

# For full URLs
from urllib.parse import urlencode
urlencode({"q": "hello world"})  # "q=hello+world"

PHP

urlencode("hello world");  // "hello+world"
rawurlencode("hello world");  // "hello%20world"

Common Mistakes

1. Not Encoding User Input

If user enters special chars, URL breaks or behaves unexpectedly.

2. Double Encoding

Encoding already-encoded text:

// Wrong
encodeURIComponent(encodeURIComponent("hello"))  // Over-encoded

// Right
encodeURIComponent("hello")  // Once

3. Not Decoding on Receive

Backend receives URL parameter, doesn't decode it:

// URL: example.com?q=hello%20world
// Wrong: q = "hello%20world" (not "hello world")
// Right: decode(q) = "hello world"

4. Encoding Slashes

Don't encode slashes in URL paths — they're path delimiters.

// Wrong
/search%2Fadvanced  // Looks like one path segment

// Right
/search/advanced  // Two path segments

URL Encoding for Specific Use Cases

Email in URL

user@example.com
Encoded: user%40example.com
URL: example.com/profile/user%40example.com

OAuth Redirect

redirect_uri=https://app.com/callback
Encoded: redirect_uri=https%3A%2F%2Fapp.com%2Fcallback

API Base URL in Query

base_url=https://api.service.com
Encoded: base_url=https%3A%2F%2Fapi.service.com

Pro Tips

  • Always encode user input in URLs
  • Use built-in functions (not manual replacement)
  • Test with special characters and Unicode
  • Don't double-encode
  • Decode on the receiving end

Conclusion

URL encoding is simple once you understand it: special characters become %HH. Use built-in functions, always encode user input, and decode on receive. Your URLs will be safe, readable, and unambiguous.