URL Encoding Explained: Why Special Characters Must Be Escaped

What Is URL Encoding?

URL encoding (also called percent encoding) converts characters that are not allowed in URLs into a format that can be safely transmitted over the internet. The process replaces unsafe characters with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII or UTF-8 code.

Every URL must consist only of a defined set of safe characters. Anything outside that set must be encoded.

Why URLs Have Restricted Characters

The URI specification (RFC 3986) divides characters into three categories:

1. Reserved characters that have special meaning in URIs: : / ? # [ ] @ ! $ & ' ( ) * + , ; =
2. Unreserved characters that are always safe: A-Z a-z 0-9 - _ . ~
3. All others that must be percent-encoded

If a reserved character appears in a query parameter value, it must be encoded. Otherwise, parsers misinterpret it as a structural separator.

How Percent Encoding Works

Space = 0x20 -> %20
!     = 0x21 -> %21
#     = 0x23 -> %23
&     = 0x26 -> %26
+     = 0x2B -> %2B (literal plus)
=     = 0x3D -> %3D
?     = 0x3F -> %3F
@     = 0x40 -> %40

Multi-byte UTF-8 characters are encoded as multiple percent sequences:

e with accent = UTF-8 0xC3 0xA9 -> %C3%A9
Chinese character = UTF-8 0xE4 0xB8 0xAD -> %E4%B8%AD

URL Encoding vs Form Encoding

There are two related but distinct encoding schemes. Percent-encoding (RFC 3986) converts spaces to %20 and is used in path segments and strict URI conformance. Application/x-www-form-urlencoded converts spaces to + and is used in HTML form submissions. They have slightly different encoding rules.

// Percent-encoding (standard)
encodeURIComponent('hello world') // 'hello%20world'

// Form encoding (spaces as +)
new URLSearchParams({ q: 'hello world' }).toString() // 'q=hello+world'

JavaScript URL Encoding Functions

JavaScript has four functions for URL encoding and decoding:

// Encoding a full URL - preserves structural characters
encodeURI('https://example.com/path?q=hello world')
// 'https://example.com/path?q=hello%20world'

// Encoding a query parameter value
encodeURIComponent('hello world & more')
// 'hello%20world%20%26%20more'

// Decoding
decodeURIComponent('hello%20world')  // 'hello world'

Common URL Encoding Examples

The most frequently encoded characters in web development are: space becomes %20, hash becomes %23 (use %23 inside query values since # is a fragment delimiter), ampersand becomes %26 (use %26 inside query values since & separates parameters), plus becomes %2B (for literal plus symbols), forward slash becomes %2F (for literal slashes in path segments), and equals becomes %3D (inside parameter values).

URL Structure and Where Encoding Applies

https://example.com:8080/path?key=value&foo=bar#section

Each part has different encoding rules. Path segments should encode everything except unreserved characters and the slash separator. Query parameters should encode ampersands, equals signs, plus symbols, percent signs, and others. Fragments follow similar rules to query encoding.

Internationalized URLs

Modern browsers display internationalized domain names and paths in their Unicode form but transmit them encoded. For example, a URL with Chinese characters in the path will be displayed nicely in the browser but transmitted as percent-encoded UTF-8 bytes. Domain names use Punycode (xn--) encoding for non-ASCII characters.

-> Try the URL Encoder/Decoder