URL Encoding Explained (Percent-Encoding)

You've seen %20 in URLs and maybe wondered why a space turns into that. That's URL encoding, and understanding it — especially the two "levels" of it — saves you from a surprising number of bugs.

What is URL encoding?

URL encoding, also called percent-encoding, replaces characters that are unsafe or have special meaning in a URL with a % followed by their hexadecimal byte value. A space becomes %20, an ampersand becomes %26, and so on. This keeps query strings, path segments and form data from breaking the structure of the URL they live in.

Why it's needed

URLs have a defined grammar. Characters like ?, &, =, / and # are reserved — they separate the parts of a URL. If a value you're putting into a query string happens to contain one of them, it would be misread as structure. Encoding turns those characters into a form that's safely carried as data instead.

The two levels: encodeURI vs encodeURIComponent

This is where most bugs come from. There are two encoding functions, and they encode different sets of characters:

• Component encoding (encodeURIComponent) encodes everything that isn't unreserved — including / ? : @ & = + $ #. Use it for a single value going into one query parameter or path segment.
• Full-URI encoding (encodeURI) leaves the characters that form a valid URL intact, so it won't break ://, ? or &. Use it only when encoding a whole, already-structured URL.

Rule of thumb: when building a query string from values, encode each value with component encoding, then join them with & and = yourself.

Non-ASCII characters

Characters outside ASCII are encoded as their UTF-8 bytes, so a single é becomes two percent-escapes (%C3%A9) and an emoji becomes four. That's expected — each byte gets its own %xx.

The double-encoding trap

Encoding a value that's already encoded is a classic mistake: %20 becomes %2520 (because the % itself gets encoded to %25). If you see stray %25 sequences in your URLs, something encoded the same value twice. Decode once to check before encoding again.

Encoding is not escaping for HTML or SQL

URL encoding only makes text safe inside a URL. It does not protect against XSS (use HTML escaping) or SQL injection (use parameterised queries). Don't rely on percent-encoding as a security control — it solves a formatting problem, not an injection one.

Try it

Encode and decode in both modes with our URL encoder/decoder — toggle component mode to see the difference. To inspect the raw bytes behind a character, the hex ↔ text converter is handy, and for redirects see the 301 vs 302 guide.