What Is URL Encoding? Complete Guide to Percent-Encoding

What Is URL Encoding?

URL encoding (also called percent-encoding) converts characters into a format that can safely travel across the internet. It replaces unsafe or reserved characters with a % followed by two hexadecimal digits.

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

Every URL you click, every API request your app sends, and every form your users submit relies on URL encoding behind the scenes.

Why URL Encoding Matters

URLs can only carry a limited set of ASCII characters. Anything outside that set — spaces, Unicode text, or special symbols — must be encoded before it enters a URL.

Without encoding:

• Spaces break URLs — they confuse browsers and servers
• Reserved characters change meaning — & splits query parameters, = assigns values
• Unicode causes errors — non-ASCII characters like é or 你好 need encoding
• APIs reject bad input — unencoded payloads fail silently or return errors

Reserved Characters

RFC 3986 defines characters with special meanings in URLs. These characters must be percent-encoded when used as data, not as delimiters:

Unreserved Characters

These characters never need encoding:

• Letters: A–Z, a–z
• Digits: 0–9
• Hyphen: -
• Period: .
• Underscore: _
• Tilde: ~

RFC 3986 states that unreserved characters should not be encoded. Encoding them produces equivalent but longer URLs.

%20 vs +: The Space Encoding Trap

Spaces in URLs present a historical ambiguity:

• %20 — true percent-encoding per RFC 3986, valid everywhere in a URL
• + — legacy encoding from application/x-www-form-urlencoded, valid only in query strings

When to use each

• Path segments: always use %20
• Query strings with application/x-www-form-urlencoded: + is the standard
• Query strings with multipart/form-data: use %20
• REST API parameters: prefer %20 for safety

// JavaScript's built-in functions
encodeURIComponent('hello world')  // "hello%20world"
encodeURI('hello world')           // "hello%20world"

// Form encoding (application/x-www-form-urlencoded)
new URLSearchParams({ q: 'hello world' }).toString()
// "q=hello+world"

Common mistake

// WRONG: Using + in path segments
const url = `/search/hello+world`  // Server reads "hello+world" literally

// CORRECT: Use %20 in path segments
const url = `/search/hello%20world`  // Server reads "hello world"

encodeURIComponent vs encodeURI

JavaScript provides two encoding functions with different scopes:

Practical guidelines

• Use encodeURI when encoding a complete URL
• Use encodeURIComponent when encoding a single query parameter value
• Never use encodeURI on query values — it leaves & and = unencoded

// Encoding parts of a query string
const query = `q=${encodeURIComponent('JS & React')}&lang=${encodeURIComponent('en')}`
// "q=JS%20%26%20React&lang=en"

Common Encoding Examples

Browser Behavior

Modern browsers handle URL encoding automatically in several contexts:

• Address bar: Browsers display decoded URLs but send encoded URLs
• fetch() and XMLHttpRequest: Do not auto-encode your URL — you must encode it
• <a href>: Browsers auto-encode paths but not query strings consistently
• Form submission: Uses application/x-www-form-urlencoded rules (spaces → +)

What you need to handle manually

• Building API request URLs in JavaScript
• Constructing URLs with dynamic path segments
• Passing special characters as query parameter values
• Sharing URLs that contain non-ASCII text

5 Best Practices

1. Always encode query parameter values with encodeURIComponent
2. Don't double-encode — check if data is already encoded before encoding again
3. Use %20 for paths, + only for form-encoded query strings
4. Decode server-side before processing — never trust raw URL input
5. Validate decoded values — URL encoding is not sanitization

Related Guides

• URL Encoding vs Base64
• Percent-Encoding Reference
• Base64 Encoding Guide

Try It Yourself

Encode and decode URLs instantly with our free URL Encoder/Decoder tool. Paste any text or URL and get the correctly encoded result in one click.