URL Encoding Explained: When & Why to Encode URLs

What Is URL Encoding?

URL encoding (also called percent encoding) is a mechanism for converting characters that are not allowed or have special meaning in a URL into a safe, transmissible format. Each unsafe character is replaced with a percent sign (%) followed by its two-digit hexadecimal ASCII code.

For example, a space character becomes %20, and an ampersand becomes %26.

Why Is URL Encoding Necessary?

URLs can only contain a limited set of characters defined by the RFC 3986 standard. Characters outside this set — including spaces, non-ASCII letters, and certain punctuation marks — would cause the URL to be parsed incorrectly or rejected outright. Consider this scenario:

https://example.com/search?q=coffee & tea

The ampersand is a query string delimiter, and the space is invalid. The server would misread this as two separate parameters. Encoded correctly:

https://example.com/search?q=coffee%20%26%20tea

Now the server receives the query string coffee & tea as a single value.

Characters That Must Be Encoded

The following characters have special meaning in URLs and must be encoded when used as data (not structure):

• Space → %20 (or + in query strings)
• ! → %21
• # → %23 (fragment identifier)
• $ → %24
• & → %26 (query parameter separator)
• ' → %27
• ( → %28, ) → %29
• + → %2B
• , → %2C
• / → %2F (path separator)
• : → %3A
• ; → %3B
• = → %3D (query key-value separator)
• ? → %3F (query string start)
• @ → %40
• [ → %5B, ] → %5D

Characters that are always safe and never need encoding: letters A–Z, digits 0–9, and the four symbols - _ . ~.

URL Encoding vs. HTML Encoding

These are different things. URL encoding uses percent signs and hexadecimal codes for URLs. HTML encoding uses named entities (like & for &) for HTML documents. Do not confuse them — applying HTML encoding to a URL (or vice versa) will break things.

How to Encode URLs in Code

JavaScript

// Encode a full URL (preserves URL structure)
encodeURI('https://example.com/search?q=hello world');
// → 'https://example.com/search?q=hello%20world'

// Encode a component (encodes everything including & = /)
encodeURIComponent('hello & world');
// → 'hello%20%26%20world'

Python

from urllib.parse import quote, urlencode

quote('hello & world')
# → 'hello%20%26%20world'

urlencode({'q': 'hello & world', 'page': 1})
# → 'q=hello+%26+world&page=1'

PHP

urlencode('hello & world');  // → 'hello+%26+world'
rawurlencode('hello & world'); // → 'hello%20%26%20world'

Common Mistakes

• Double encoding — Encoding an already-encoded string produces %2520 instead of %20. Always decode first if the string might already be encoded.
• Encoding the whole URL — Only encode the values within a URL, not the structure (scheme, slashes, domain). Use encodeURIComponent, not encodeURI, for individual parameters.
• Using + for paths — The + sign represents a space only in query strings (application/x-www-form-urlencoded format). In URL paths, always use %20.

Conclusion

URL encoding is one of those foundational web concepts that trips up even experienced developers. The key rule: always encode data values placed inside URLs, never the URL structure itself. Use our URL Encoder/Decoder tool to quickly encode or decode any string without writing a single line of code.