URL Encoding Explained: When and Why You Need It

What is URL Encoding?

URL encoding, also known as percent-encoding, is a mechanism defined in RFC 3986 for representing characters in a URI (Uniform Resource Identifier) that are not allowed or have special meaning. It works by replacing unsafe characters with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII code point.

For example, a space character (ASCII 32, hex 20) becomes %20. The at-sign @ (ASCII 64, hex 40) becomes %40. This allows you to include arbitrary data in a URL without conflicting with the URL's own syntax.

Consider this search URL:

# Without encoding (broken):
https://example.com/search?q=fish & chips&lang=en

# With encoding (correct):
https://example.com/search?q=fish%20%26%20chips&lang=en

Without encoding, the & in "fish & chips" would be misinterpreted as a query parameter separator, and the server would see three parameters: q=fish , chips, and lang=en. URL encoding the ampersand as %26 and the spaces as %20 tells the server they are part of the value, not structural separators. You can try this with our String Encoder / Decoder to see the encoding in action.

Which Characters Need Encoding?

RFC 3986 divides characters into three categories:

Unreserved Characters (Never Encode)

These characters are safe to use anywhere in a URL without encoding:

A-Z  a-z  0-9  -  _  .  ~

That's it — 66 characters total. Everything outside this set may need encoding depending on its position in the URL.

Reserved Characters (Context-Dependent)

Reserved characters have special meaning in URL syntax. You must encode them when they appear as data (e.g., inside a query parameter value), but you must not encode them when they serve their structural purpose:

:  /  ?  #  [  ]  @  !  $  &  '  (  )  *  +  ,  ;  =

For example, / separates path segments — encoding it as %2F in the path would break the URL. But if your query value literally contains a slash, you should encode it.

All Other Characters (Always Encode)

Spaces, non-ASCII characters (like e, ü, CJK characters, emoji), and control characters must always be percent-encoded. For multi-byte UTF-8 characters, each byte is encoded separately. For example, the euro sign (€) is encoded as %E2%82%AC (three bytes in UTF-8).

%20 vs + for Spaces

You'll see spaces represented two ways in URLs: %20 and +. They are not interchangeable— they come from different specifications and apply to different parts of the URL.

• %20 (RFC 3986) — The standard percent-encoding for a space character. Valid anywhere in a URL: path segments, query strings, fragments. This is the modern, universal standard.
• + (application/x-www-form-urlencoded) — A legacy convention from HTML form submissions. The + sign represents a space only inside query strings when the content type is application/x-www-form-urlencoded. In the URL path, a literal + means a plus sign, not a space.

# Both valid in a query string:
/search?q=hello+world      (form-encoded)
/search?q=hello%20world    (percent-encoded)

# In a path, + is a literal plus:
/files/my+file.txt         (file named "my+file.txt")
/files/my%20file.txt       (file named "my file.txt")

Best practice: Use %20 for spaces unless you are specifically building application/x-www-form-urlencoded data (e.g., HTML form POST bodies). When in doubt, %20 always works.

encodeURI vs encodeURIComponent in JavaScript

JavaScript provides two built-in functions for URL encoding. Choosing the wrong one is one of the most common sources of URL bugs.

encodeURI()

Encodes a complete URL. It preserves all characters that have structural meaning in a URL, including :, /, ?, #, &, and =:

encodeURI("https://example.com/path?q=hello world&lang=en")
// "https://example.com/path?q=hello%20world&lang=en"
// Notice: :, /, ?, &, = are NOT encoded

encodeURIComponent()

Encodes a single value to be inserted into a URL. It encodes everything except unreserved characters (A-Z a-z 0-9 - _ . ~):

encodeURIComponent("hello world & goodbye")
// "hello%20world%20%26%20goodbye"
// Notice: & IS encoded because it's data, not a separator

// Correct usage — encode each value separately:
const name = "John & Jane";
const city = "New York";
const url = `/search?name=${encodeURIComponent(name)}&city=${encodeURIComponent(city)}`;
// "/search?name=John%20%26%20Jane&city=New%20York"

For decoding, use the corresponding decodeURI() and decodeURIComponent(). Modern JavaScript also offers the URL and URLSearchParams APIs, which handle encoding automatically:

// Modern approach — URLSearchParams handles encoding for you:
const params = new URLSearchParams();
params.set("q", "fish & chips");
params.set("lang", "en");
console.log(params.toString());
// "q=fish+%26+chips&lang=en"

// Full URL construction:
const url = new URL("https://example.com/search");
url.searchParams.set("q", "hello world");
console.log(url.href);
// "https://example.com/search?q=hello+world"

URL Encoding in Python and PHP

Python: urllib.parse

Python's standard library provides several functions in urllib.parse:

from urllib.parse import quote, quote_plus, urlencode

# quote() — RFC 3986 percent-encoding (like encodeURIComponent)
quote("hello world & goodbye")
# "hello%20world%20%26%20goodbye"

# quote_plus() — form-encoded (spaces become +)
quote_plus("hello world & goodbye")
# "hello+world+%26+goodbye"

# Safe parameter — exclude chars from encoding:
quote("https://example.com/path", safe=":/?#[]@!$&'()*+,;=")
# "https://example.com/path" (unchanged — structure preserved)

# urlencode() — encode a dict of query params:
urlencode({"q": "fish & chips", "lang": "en"})
# "q=fish+%26+chips&lang=en"

PHP: urlencode vs rawurlencode

PHP mirrors JavaScript's split but with different function names:

<?php
// urlencode() — form-encoded (spaces become +)
echo urlencode("hello world & goodbye");
// "hello+world+%26+goodbye"

// rawurlencode() — RFC 3986 (spaces become %20)
echo rawurlencode("hello world & goodbye");
// "hello%20world%20%26%20goodbye"

// Building a query string:
echo http_build_query(["q" => "fish & chips", "lang" => "en"]);
// "q=fish+%26+chips&lang=en"
?>

Rule of thumb: Use rawurlencode (PHP) or quote (Python) for path segments. Use urlencode (PHP) or quote_plus (Python) for form data and query strings. For quick ad-hoc encoding, try our String Encoder / Decoder which supports URL encoding, Base64 encoding, and more.

Common URL Encoding Mistakes

These are the errors that trip up developers most often:

Frequently Asked Questions

Related Tools