URL Encoding Explained: Percent-Encoding for Web URLs

URL encoding is a fundamental web technology that allows special characters to be safely transmitted in URLs. Yet many developers don't fully understand why it's necessary or how to use it correctly. This guide demystifies URL encoding and shows you how to handle it properly in your applications.

What is URL Encoding?

URL encoding (also called percent-encoding or percent encoding) is a mechanism for encoding information in a URL in a safe format. It converts characters into a format that can be transmitted over the internet.

The format is simple: a percent sign (%) followed by two hexadecimal digits representing the character's ASCII code.

Examples:

Space (" ") → %20 or +
Dollar ($) → %24
Ampersand (&) → %26
Hash (#) → %23
Percent (%) → %25
Forward slash (/) → %2F
Question mark (?) → %3F

Why URL Encoding Matters

URLs follow strict rules about which characters are allowed. Only unreserved characters (A-Z, a-z, 0-9, hyphen, underscore, period, tilde) can appear directly in URLs. All other characters must be encoded.

Why This Matters:

• Reserved Characters Have Special Meaning: Characters like ?, #, &, and = have special meaning in URLs and must be encoded when used as data
• Safety: Encoding ensures data isn't misinterpreted by servers or proxies
• International Support: Allows non-ASCII characters (UTF-8) to be safely transmitted
• Consistency: Standardized encoding prevents parsing errors across different systems

URL Structure and Encoding

Different parts of a URL require different encoding rules:

https://example.com/path?query=value&key=data#fragment
         _____  _________/ ___/ _______/ _____/ ________/
         scheme   domain      path  query    sep   fragment

- Scheme: No encoding needed (https://)
- Domain: Limited encoding (international domains use punycode)
- Path: Encode special characters
- Query: Encode special characters, & separates parameters
- Fragment: Encode special characters

Common URL Encoding Scenarios

Query Parameters

When passing user input as query parameters, always encode the values:

// Without encoding (WRONG)
/search?q=hello world&category=books & magazines

// With encoding (CORRECT)
/search?q=hello%20world&category=books%20%26%20magazines

Search Terms

// User searches for: "C++ programming"
// Encoded: C%2B%2B%20programming

// URL: /search?q=C%2B%2B%20programming

Email Addresses

// Email: john+tag@example.com
// Encoded: john%2Btag%40example.com

// URL: /mailto/john%2Btag%40example.com

Reserved vs Unreserved Characters

Reserved Characters (have special meaning):

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

Unreserved Characters (safe to use as-is):

A-Z a-z 0-9 - _ . ~

Special Characters (must always be encoded):

Space: %20 or +
Ampersand: %26
Equals: %3D
Hash: %23
Percent: %25

URL Encoding in Different Contexts

JavaScript

// Encode entire URL
const encoded = encodeURI('https://example.com/hello world?q=test');
// Result: https://example.com/hello%20world?q=test

// Encode query value only
const param = 'hello world & stuff';
const encoded = encodeURIComponent(param);
// Result: hello%20world%20%26%20stuff

// Decode
const decoded = decodeURIComponent('hello%20world');
// Result: hello world

Python

from urllib.parse import quote, urlencode

# Encode string
encoded = quote('hello world & stuff')
# Result: hello%20world%20%26%20stuff

# Encode entire URL
from urllib.parse import urlparse, quote
url = 'https://example.com/hello world'
# Safe encoding with / preserved
encoded = quote(url, safe=':/')

PHP

// Encode
$encoded = urlencode('hello world & stuff');
// Result: hello+world+%26+stuff

// Decode
$decoded = urldecode('hello+world+%26+stuff');
// Result: hello world & stuff

International Characters (UTF-8)

For non-ASCII characters, URL encoding first converts to UTF-8 bytes, then encodes each byte:

Character: 中
UTF-8 bytes: E4 B8 AD
URL encoded: %E4%B8%AD

Complete example:
Search: "café"
UTF-8: 63 61 66 C3 A9
Encoded: caf%C3%A9

Common URL Encoding Mistakes

Encoding the Entire URL (Wrong)

// WRONG - encoding slashes and colons
encodeURIComponent('https://example.com/path')
// Result: https%3A%2F%2Fexample.com%2Fpath (broken!)

// CORRECT - encode only the value
'https://example.com/' + encodeURIComponent('my path')

Double Encoding

// WRONG - encoding twice
encodeURIComponent(encodeURIComponent('hello'))
// Result: hello%2520 (double-encoded)

// CORRECT - encode once
encodeURIComponent('hello')
// Result: hello%20

Forgetting to Encode

// WRONG - spaces in URL
/search?q=hello world

// CORRECT - properly encoded
/search?q=hello%20world

URL Encoding Best Practices

• Always Encode User Input: Never trust user-supplied data in URLs
• Use Language Functions: Use encodeURIComponent() or equivalent, don't manually escape
• Encode Only Values: Don't encode the URL structure itself (scheme, domain, path separators)
• Know the Difference: encodeURI() vs encodeURIComponent() — the latter encodes more characters
• Validate Input: Even with encoding, validate and sanitize user input server-side
• Document Your Approach: If using custom encoding logic, document it clearly for maintainability

Conclusion

URL encoding is essential for safe, reliable web applications. By understanding why it's necessary and when to apply it, you'll write more robust code and avoid common security and compatibility issues. Use the built-in encoding functions in your language rather than trying to manually encode, and always encode user input before including it in URLs.

Use our URL encoder tool to quickly test encoding without writing code, and bookmark this guide for reference.

Last updated: 4/27/2026