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

If you've ever clicked on a link and noticed something like https://example.com/search?q=hello%20world in your browser's address bar, you've seen URL encoding in action.

This guide explains what URL encoding is, why browsers and servers need it, and how to use it correctly.

What Is URL Encoding?

URL encoding (also called percent-encoding) converts characters that are not allowed in URLs into a safe format. Each unsafe character is replaced with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII or UTF-8 code.

For example:

• Space → %20
• & → %26
• = → %3D
• / → %2F
• # → %23

Why Does URL Encoding Exist?

URLs can only contain a limited set of ASCII characters. Letters (A–Z, a–z), numbers (0–9), and a few special characters (-, _, ., ~) are "safe." Everything else must be encoded.

Without encoding, characters like & and = would be misinterpreted as part of the URL structure. If you search for cats & dogs, the & would look like a separator between two query parameters rather than part of your search term.

The Two Hex Digits, Explained

The two digits after each % are the character's byte value in hexadecimal. A space is byte 32 in ASCII, which is 20 in hex — hence %20. An @ sign is byte 64, or 40 in hex, giving %40. For characters beyond basic ASCII, the byte is first encoded as UTF-8 (often producing multiple bytes) and each byte is percent-encoded separately. That's why an accented é becomes %C3%A9 — two bytes, two percent-escapes. You almost never need to do this by hand, but knowing the pattern makes an encoded URL far less mysterious when you're reading logs or debugging a redirect.

Characters That Must Be Encoded

These characters have special meaning in URLs and must be encoded when used as data:

encodeURI vs encodeURIComponent

In JavaScript, there are two built-in functions for URL encoding:

encodeURI()

Encodes a complete URL. It preserves characters that are structural parts of URLs: :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =.

encodeURI("https://example.com/search?q=hello world")
// → "https://example.com/search?q=hello%20world"

encodeURIComponent()

Encodes a URL component (like a query parameter value). It encodes almost everything, including /, ?, &, =. Use this when encoding values that go inside a query string.

encodeURIComponent("cats & dogs")
// → "cats%20%26%20dogs"

// Building a query string manually:
const query = "cats & dogs"
const url = `https://example.com/search?q=${encodeURIComponent(query)}`
// → "https://example.com/search?q=cats%20%26%20dogs"

Real-World Examples

Building API URLs

const city = "New York"
const apiUrl = `https://api.example.com/weather?city=${encodeURIComponent(city)}`
// → ".../weather?city=New%20York"

Form Submissions

When you submit an HTML form with method="GET", the browser automatically encodes the form data. With method="POST" and application/x-www-form-urlencoded, the browser also encodes the body.

Redirects with Return URLs

const returnUrl = "https://app.example.com/dashboard?tab=settings"
const loginUrl = `/login?redirect=${encodeURIComponent(returnUrl)}`
// The full returnUrl (including its own query string) is safely embedded

This last example is the clearest illustration of why encodeURIComponent matters. The return URL contains its own ? and =. If you dropped it into the login URL raw, the receiving server would see ?tab=settings as a parameter of the login page, not as part of the redirect value. Encoding turns the whole thing into a single opaque string (https%3A%2F%2Fapp.example.com%2Fdashboard%3Ftab%3Dsettings) that survives intact until it's decoded on the other side.

A Quick Comparison

The single most common decision is which function to reach for. This table settles it:

When in doubt, reach for encodeURIComponent. Over-encoding a value that lands inside a query string is safe; under-encoding it breaks the URL.

Decoding URL-Encoded Strings

To decode in JavaScript:

decodeURIComponent("hello%20world")  // → "hello world"
decodeURIComponent("cats%20%26%20dogs")  // → "cats & dogs"

Our free URL Encoder/Decoder tool lets you encode and decode interactively without writing any code.

Common Mistakes

1. Double-encoding: Encoding an already-encoded string produces %2520 instead of %20. Always decode before re-encoding if you're unsure of the input state.

2. Using encodeURI when you need encodeURIComponent: If you're embedding a value in a query string, always use encodeURIComponent. Using encodeURI won't encode & and =, which will break your query string parsing.

3. Forgetting to encode on the backend: Server-side code (Node.js, Python, PHP) also needs proper URL encoding when constructing URLs programmatically.

4. Encoding the + sign incorrectly for spaces: In the older application/x-www-form-urlencoded format, a space is represented as +, not %20. This means a literal + in your data must be encoded as %2B or it will be misread as a space when decoded. If you see phone numbers losing their leading +, this is usually the culprit.

A practical debugging tip: when a URL "works in the browser but breaks in code," paste both the working and broken versions into a decoder and compare them character by character. Nine times out of ten you'll spot a %2520 (a double-encoded space) or an unencoded & that silently split your parameter in two. The mismatch is almost always in one specific character, and seeing the decoded form side by side makes it jump out immediately.

Frequently Asked Questions

What does %20 mean in a URL?

%20 is a percent-encoded space character. A space isn't allowed in a raw URL, so it's replaced with % followed by the space's byte value in hexadecimal (32 in decimal is 20 in hex). Whenever you see %20 in an address bar, it's just standing in for a space in the original text — hello%20world decodes to hello world.

When should I use encodeURI instead of encodeURIComponent?

Use encodeURI() only when you're encoding a complete, already-assembled URL and want to leave its structural characters (:, /, ?, #, &) intact. Use encodeURIComponent() whenever you're encoding a single piece of data — a query parameter value, a search term, a return URL — that will be inserted into a larger URL. The rule of thumb: if the string is a whole URL, encodeURI; if it's a fragment going inside one, encodeURIComponent.

Why is my URL showing %2520 instead of %20?

That's a classic double-encoding bug. %2520 happens when you encode a string that was already encoded: the % in %20 gets re-encoded to %25, producing %2520. Fix it by decoding the value back to its raw form before encoding it once, and audit your code for places where a value passes through two encoding steps.

Is URL encoding the same as Base64 encoding?

No — they solve different problems. URL encoding makes text safe to place inside a URL by escaping reserved characters. Base64 encoding turns arbitrary binary data into a text-safe string using 64 characters. You'll sometimes use both together (e.g. Base64URL, which is a URL-safe flavor of Base64), but they aren't interchangeable.

Conclusion

URL encoding exists so that any character — a space, an ampersand, an accented letter, or an entire nested URL — can travel safely inside another URL without being mistaken for structure. Remember the core rule (encodeURIComponent for values, encodeURI for whole URLs), watch for double-encoding, and you'll avoid the vast majority of URL bugs.

Next step: try the URL Encoder/Decoder tool to encode a tricky value or decode a mysterious %-filled string without writing any code.