Why URLs Need Encoding

How URL encoding (percent-encoding) works, which characters need it, and when to use it

URL encoding, also called percent-encoding, represents characters that could otherwise be confused with URL syntax in an encoded form. It is especially useful for query parameter values, spaces, reserved characters, and non-ASCII text.

URLs Have Reserved Characters

A URL is structured text with specific characters that carry special meaning: / separates path segments, ? starts the query string, = separates key from value, & separates parameters, and so on.

What happens if your data contains these characters? For example, if a search query is salt & pepper, you can't just put it in a URL as-is — the & would be interpreted as a parameter separator, breaking the URL structure.

Percent-Encoding (URL Encoding)

The solution is percent-encoding: represent the encoded bytes with a % followed by two hexadecimal digits per byte. ASCII characters map directly to one byte; non-ASCII text is normally encoded as UTF-8 bytes first.

salt & pepper  →  salt%20%26%20pepper
https://example.com/?q=salt%20%26%20pepper

Space becomes %20 in percent-encoding (or + in application/x-www-form-urlencoded form data). & becomes %26. = becomes %3D. And so on.

Which Characters Need Encoding?

RFC 3986 defines "unreserved characters" that are always safe in URLs without encoding:

  • Letters: A–Z, a–z
  • Digits: 0–9
  • Special: - _ . ~

Everything else — including spaces, &, =, /, #, ?, and non-ASCII characters like é or 한글 — must be percent-encoded when used as data (not as URL structure).

encodeURI vs encodeURIComponent

In JavaScript, two functions handle URL encoding with different scopes:

  • encodeURI(): Encodes a complete URL, preserving characters that form URL structure (:, /, ?, #, &, =). Use when encoding a full URL.
  • encodeURIComponent(): Encodes a URL component (a single parameter value), encoding even ?, &, and =. Use when encoding a query parameter value.

The Votilo Tools URL Encoder / Decoder uses encodeURIComponent for encoding individual values, which is the correct choice for query parameter data.