URL Encoding Explained: What It Is and When You Need It

Every time you click a link, submit a search form, or make an API request, URL encoding is working silently in the background. It is one of those foundational web technologies that most developers encounter constantly without fully understanding. This guide explains exactly what URL encoding is, why it exists, and how to use it correctly.

Why URL Encoding Exists

URLs (Uniform Resource Locators) were designed for ASCII text. But the modern web carries content in dozens of languages, and URLs frequently need to carry data that contains characters with special meaning in the URL syntax itself — characters like &, =, ?, #, /, and spaces.

Without a way to encode these characters, a URL like: https://example.com/search?q=bread & butter would be ambiguous — is the space part of the query, or a URL delimiter? Is the & separating two parameters or part of the search term?

URL encoding (also called percent encoding) solves this by replacing unsafe characters with a % followed by two hexadecimal digits representing the character's UTF-8 byte value. A space becomes %20, & becomes %26, = becomes %3D, and so on.

The Percent Encoding Mechanism

The encoding rule is straightforward: every character that is not in the unreserved set must be encoded. The unreserved characters are:

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

All other characters — including spaces, symbols, and non-ASCII Unicode — must be encoded.

For Unicode characters (like accented letters, Japanese, emoji), the character is first encoded as UTF-8 bytes, and each byte is then percent-encoded. The emoji 🎉 is four UTF-8 bytes: 0xF0 0x9F 0x8E 0x89, which encodes to %F0%9F%8E%89.

encodeURI vs. encodeURIComponent

JavaScript provides two encoding functions, and choosing the wrong one is a common source of bugs:

encodeURI(url) — Encodes a complete URL. Preserves characters that have structural meaning in a URL: / : ? # [ ] @ ! $ & ' ( ) * + , ; =. Use this when encoding a full URL that needs to remain a valid URL.
encodeURIComponent(value) — Encodes a single value to be used as a query parameter or URL segment. Encodes everything except A–Z a–z 0–9 - _ . ~. Use this for individual parameter values.

The most common use case — encoding a query parameter value — should use encodeURIComponent:

const query = "bread & butter";
const url = `https://example.com/search?q=${encodeURIComponent(query)}`;
// → https://example.com/search?q=bread%20%26%20butter

If you used encodeURI here, the & would not be encoded (because it is a URL-structural character), breaking the query string parsing.

The + vs. %20 Debate

Spaces can be encoded two ways in URLs: as %20 (standard percent encoding) or as + (HTML form encoding). The + notation comes from the application/x-www-form-urlencoded format used by HTML forms when submitted via GET.

In URL path segments, spaces must be %20. In query parameters, many systems accept both %20 and +. However, + in a URL that was encoded with encodeURIComponent becomes %2B (because it encodes the plus sign itself), which creates confusion when systems try to decode it as a space.

Best practice: Use %20 for spaces in all contexts. Use encodeURIComponent which produces %20 for spaces, not +.

Common Encoded Characters Reference

Space → %20
! → %21
" → %22
# → %23
& → %26
= → %3D
/ → %2F
? → %3F
@ → %40
+ → %2B

When You Need URL Encoding

Building query strings manually — Any time you construct a URL with user input or dynamic data, encode each parameter value.
Passing URLs as parameters — A redirect URL passed as a query parameter must be fully encoded: ?redirect=https%3A%2F%2Fexample.com%2Fpath.
Non-ASCII path segments — URLs with Chinese, Arabic, or other non-Latin characters must be percent-encoded for compatibility.
OAuth signatures — OAuth 1.0 requires precise URL encoding of all parameters before signing. Even a missed encoding causes signature verification failures.
Reading encoded URLs — Server logs, browser address bars, and API responses frequently contain percent-encoded URLs. Decode them to read the original values.

Summary

URL encoding replaces characters that are unsafe or have special meaning in URLs with a % followed by two hex digits. Use encodeURIComponent for query parameter values and path segments, and encodeURI for complete URLs. Spaces should be %20, not +. Always encode user input before including it in a URL to prevent injection attacks and parsing errors.