URL Encoding Explained (When and Why to Percent-Encode)

You've seen it in the address bar: spaces become %20, slashes become %2F, and a search query turns into a trail of percent signs. That's URL encoding, and understanding it saves you from a whole class of broken-link bugs. This guide explains what it is, when you need it, and the one distinction that trips people up.

What is URL encoding?

URLs are only allowed to contain a limited set of characters. Anything outside that set — spaces, many punctuation marks, non-English letters — must be percent-encoded: replaced with a % followed by the character's hexadecimal code. A space becomes %20, a forward slash becomes %2F, an ampersand becomes %26, and so on. This is what lets a URL carry arbitrary text safely without breaking.

Why it matters

Without encoding, characters that have special meaning in a URL would be misinterpreted. Consider a search for "cats & dogs". If you drop that straight into a query string, the & looks like the separator between two parameters, and everything after it gets misread. Encode it to cats%20%26%20dogs and the whole phrase is treated as a single value. Encoding is the difference between a link that works and one that silently sends the wrong data.

The distinction that trips everyone up

There are two levels of encoding, and picking the wrong one causes subtle bugs:

• Encode component (encodeURIComponent) escapes everything that isn't safe, including /, ?, &, and =. Use this when encoding a single value that goes inside a URL — like one search term or one query parameter. You don't want a slash in that value to be read as a path separator.
• Encode full URL (encodeURI) leaves the structural characters (/ ? & =) intact because they're doing their job as URL structure. Use this when encoding a whole URL that already has its structure and just needs unsafe characters (like spaces) cleaned up.

Rule of thumb: encoding a piece that goes into a URL → component. Cleaning up a complete URL → full URL. Our URL Encoder / Decoder lets you toggle between the two so you always get the right result.

How to encode or decode a URL

1. Open the URL Encoder / Decoder.
2. Choose encode or decode.
3. Toggle "component" on for a single value, off for a full URL.
4. Paste your text and copy the result.

It handles full Unicode correctly, so emoji and accented characters round-trip properly, and everything runs in your browser.

Common situations

• Building a link with a search query — encode the query as a component.
• Debugging a URL someone sent you — decode it to read what it actually contains.
• Passing data in a query string — encode each value so special characters survive.
• Reading an encoded redirect URL — decode it to see where it really goes.
• Fixing a URL with spaces — encode the full URL to clean it up.

A quick reference

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

You don't need to memorise these — the tool handles them — but recognising them helps you read encoded URLs at a glance.

Double-encoding: the bug that bites everyone

Once you understand encoding, there's one failure mode worth knowing about because it's so common: double-encoding. It happens when text that's already encoded gets encoded again. A space (%20) becomes %2520, because the % itself gets encoded to %25. The result is a URL that looks plausible but sends the wrong data, and the bug is maddening to track down because everything looks encoded correctly.

Double-encoding usually creeps in when a value passes through several layers — a form, a framework, an API client — each of which "helpfully" encodes it again. The fix is to be deliberate about where encoding happens: encode once, at the point where a raw value is placed into a URL, and don't encode already-encoded strings. If you ever see %25 where you expect a normal character, decode the string once and check whether it's already correct underneath.

Decoding a suspicious URL is the fastest way to diagnose this. Paste it into a decoder: if one pass gives you clean, readable text, it was encoded once correctly. If one pass still leaves percent signs and a second pass is needed to read it, you've found your double-encoding. This is exactly the kind of check a quick encode/decode tool makes trivial, turning a confusing bug into a ten-second diagnosis.

Related tools

• Base64 Encode / Decode — encode text and data as Base64.
• JSON Formatter — format and validate JSON.
• Slug Generator — create clean URL slugs.
• UUID Generator — generate unique IDs.

Encoding in practice, across the stack

In a real application, encoding shows up at several layers, and knowing where it's handled for you prevents both under- and over-encoding. Most HTTP client libraries encode query parameters automatically when you pass them as structured values, which is why you should give them raw values rather than pre-encoded ones. Frameworks that build URLs often encode path segments for you too. Problems arise at the seams — when a value crosses from one system to another and each assumes the other did (or didn't) encode. When in doubt, decode what you have to see its true state, then encode exactly once at the boundary where a raw value becomes part of a URL.

Common questions

What's the difference between component and full-URL mode? Component mode escapes characters like / ? & = for a single value; full-URL mode leaves those structural characters intact.

Does it handle emoji and accents? Yes — encoding and decoding use proper UTF-8, so international characters round-trip correctly.

Is my data uploaded? No. Everything is encoded and decoded locally in your browser.

Why does my URL have %20 in it? %20 is the percent-encoding for a space; encoding replaces unsafe characters so URLs transmit correctly.

Is URL encoding the same as encryption? No — it's a reversible transformation for safe transmission, not a way to hide data.

The bottom line

URL encoding keeps links working when they carry spaces, symbols, or non-English text — and knowing component vs full-URL mode prevents subtle bugs. Encode and decode correctly with our free URL Encoder / Decoder.

---

Prime Webkit builds free tools like this, and develops web apps where URLs, parameters, and integrations are handled correctly under the hood. If you're building something like that, our app team can help.