URL Encoding Explained: What %20 Actually Means

What Is URL Encoding? The Easy Guide to %20 and 2 Functions

by

If you have ever copied a link and found it full of strange symbols like %20, you have seen URL encoding in action. URL encoding — also called percent encoding — is the system that lets web addresses safely carry characters that are not allowed in a URL, such as spaces and symbols like & and ?. This guide explains what is url encoding percent encoding in plain terms: which characters must be encoded, why a space becomes %20, the difference between + and %20 in query strings, when to use encodeURI vs encodeURIComponent in JavaScript, and how to spot and fix the classic double-encoding bug.

Table of Contents

What Is URL Encoding (Percent Encoding)?

URLs were designed to work with a limited set of characters — basically letters, digits, and a handful of ASCII symbols. But the real world is full of spaces, accented letters, and symbols that have special jobs inside a URL. URL encoding solves this by converting any “unsafe” character into a triplet: a percent sign (%) followed by two hexadecimal digits representing the character’s byte value. That gap is exactly what is URL encoding for: a translation layer between human text and URL-safe text.

A space is byte 32 in decimal, which is 20 in hexadecimal, so a space becomes %20. An exclamation mark (!) is byte 33, or 21 in hex, so it becomes %21. For characters outside basic ASCII, such as é, the character is first converted to its UTF-8 bytes, and then each byte is percent-encoded: é becomes the bytes C3 and A9, so it appears as %C3%A9.

URL Encoding Example: Why a Space Becomes %20

Here is a concrete url encoding example. Imagine a search page for the query “red shoes”: Before the example, the one-line version of what is URL encoding: every unsafe character becomes a % sign plus two hex digits.

https://example.com/search?q=red shoes

That raw space is not allowed in a URL. The correctly encoded version is:

https://example.com/search?q=red%20shoes

Browsers are forgiving — paste the unencoded version into an address bar and the browser quietly encodes it for you. But the moment that URL travels through an API, a redirect, an email client, or code that does not do the cleanup, the raw space can get truncated or turned into a broken link. Encoding it yourself removes the guesswork. Which is why the practical question is rarely what is URL encoding in theory, but where your pipeline encodes twice.

Some of the most common encodings you will meet in the wild:

  • %20 — space
  • %21 — !
  • %22 — ” (double quote)
  • %23 — #
  • %24 — $
  • %25 — % (the percent sign itself)
  • %26 — &
  • %27 — ‘ (apostrophe)
  • %28 and %29 — ( and )
  • %2B — +
  • %2F — /
  • %3A — :
  • %3D — =
  • %3F — ?

Try pasting any of these into our URL Encoder / Decoder to see the encoding and decoding happen live in your browser. Seeing it live answers what is URL encoding faster than any paragraph.

Reserved vs Unreserved Characters: Which Ones Must Be Encoded

Not every character needs encoding. The characters in a URL fall into two groups, and the rule for which ones must be encoded is simple once you see it. This is the part of what is URL encoding most beginners miss: encoding is selective, not total.

Unreserved characters are always safe and must never be encoded: the letters A–Z and a–z, the digits 0–9, and -, _, ., and ~.

Reserved characters have special jobs inside a URL: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. The slashes in https://, the ? that starts a query string, and the & that separates parameters are all reserved characters doing structural work.

The rule: a reserved character must be encoded when it appears as data rather than as structure. If the character is doing its structural job — the ? that begins your query string — leave it alone. If it is part of the actual data, encode it. Two examples make this concrete: Ask what is URL encoding really about and veterans will give you this rule: data gets encoded, structure does not.

  • A search for fish & chips must encode the ampersand as %26. Left raw, the & would be read as a parameter separator, splitting your search into two broken parameters: q=fish and chips=.
  • A filename like report (final).pdf should have its parentheses encoded as %28 and %29 when it travels in a URL, so no parser mistakes them for something structural.

This “data vs structure” idea is the key to almost every encoding bug. Whenever a URL breaks, ask: is this character here as data or as structure? The answer tells you whether it should be encoded. Tattoo it on your debugging brain: half of what is URL encoding is just this distinction.

A related but different system is Base64 encoding, which converts binary data (like images) into plain text for transport. You will often see them together — a Base64 string placed inside a URL still needs its +, /, and = characters percent-encoded.

+ vs %20 in Query Strings

Here is one of the most persistent points of confusion: in query strings, a space can appear as either %20 or +. Both are “correct” — but in different contexts, and mixing them up causes real bugs. If you only learn one corner of what is URL encoding, make it this one — it causes the most real-world bugs.

In the path part of a URL (everything before the ?), a space is always encoded as %20. There is no alternative.

In the query string (everything after the ?), spaces are traditionally encoded as + when the data comes from an HTML form. This is the application/x-www-form-urlencoded format — what your browser uses when you submit a form with the GET method. So a form search for “red shoes” produces ?q=red+shoes, while a hand-built URL would more likely use ?q=red%20shoes. A correct query-string decoder handles both: it converts + to a space first, then percent-decodes the rest.

The trap: a literal plus sign in your data must be encoded as %2B. If someone searches for “C++” and the plus signs are left raw — ?q=C++ — the decoder turns each + into a space, and the search becomes “C “. The correct encoding is ?q=C%2B%2B. This is one of the most common encoding bugs in search boxes, and it is worth checking any time user input can contain a +.

Rule of thumb: use %20 in paths, accept both + and %20 when reading query strings, and always encode a literal + as %2B when writing them. That rule of thumb is what is URL encoding reduced to one line for daily work.

encodeURI vs encodeURIComponent: Which One to Use

If you write JavaScript, you have two built-in encoding functions, and picking the wrong one is the source of a huge share of encoding bugs. For the full reference, see MDN’s encodeURIComponent documentation. Choosing wrongly is the most expensive misunderstanding of what is URL encoding in front-end code.

encodeURI() is for encoding a complete URL. It encodes spaces and non-ASCII characters but deliberately leaves structural characters alone — : / ? # & = and friends pass through untouched. Use it when you have a full URL that just needs its unsafe characters cleaned up.

encodeURIComponent() is for encoding a single value — one query parameter, one path segment, one piece of data. It encodes everything except the unreserved characters, including the structural characters. Use it when you are building a URL out of parts. Watch the difference on the same input:

const value = "a/b?c=d";

encodeURI(value); // "a/b?c=d" — structure preserved

encodeURIComponent(value); // "a%2Fb%3Fc%3Dd" — everything encoded

Now the two classic mistakes. First, using encodeURIComponent on a whole URL destroys it: Both mistakes come from the same gap in what is URL encoding: knowing which function encodes what.

encodeURIComponent("https://example.com/a b");

// "https%3A%2F%2Fexample.com%2Fa%20b" — broken link!

Second, using encodeURI on a value inside a query string leaves dangerous characters raw:

"https://example.com/?q=" + encodeURI("fish & chips");

// "https://example.com/?q=fish%20&%20chips" — the & splits the query!

The correct pattern: encode each part with encodeURIComponent, then assemble the URL yourself: Internalize that pattern and you understand what is URL encoding well enough to never hit the bug again.

"https://example.com/?q=" + encodeURIComponent("fish & chips");

// "https://example.com/?q=fish%20%26%20chips" — correct

The Double-Encoding Bug: How to Spot It and Fix It

The double-encoding bug is the most common URL encoding bug on the web, and it has an unmistakable fingerprint: %25 appearing in your URLs. Remember that % itself encodes to %25. So if an already-encoded string gets encoded a second time, every % becomes %25 — and %20 (a space) becomes %2520. Recognizing %25 on sight is the advanced level of what is URL encoding: you can now diagnose other people’s broken links.

encodeURIComponent(encodeURIComponent("a b"));

// "a%2520b" — the % of %20 was encoded again

Decoding it once does not fix it — it just reveals the first layer:

decodeURIComponent("a%2520b"); // "a%20b" — still encoded!

decodeURIComponent("a%20b"); // "a b" — there it is

Where does this happen in practice? Usually when two layers of code each “helpfully” encode the same value: a CMS encodes a link and then a plugin encodes it again, or a developer encodes a full URL that already contains encoded parameters. Two layers, one value, double-encoded — the classic story of what is URL encoding going wrong in production.

How to spot it: look for %25 sequences in the browser address bar, in server logs, or in the network tab of your browser’s developer tools. %2520, %252F, and %253A are the usual suspects. How to fix it: decode the value once to see what it really is, then make sure exactly one layer of your code encodes it. The lasting prevention rule is simple — only ever encode raw, unencoded data, and never encode the output of another encoder.

How URL Encoding Connects to Slugs and Query Parameters

URL encoding does not exist in isolation — it is part of how clean, working URLs are built. Zoom out and what is URL encoding becomes clear: it is one piece of the machinery that makes URLs work.

Slugs are the human-readable part of a URL, like the what-is-url-encoding in this post’s address. A slug generator takes a title like “URL Encoding Explained: What %20 Actually Means” and, instead of percent-encoding every special character, it strips or replaces them to produce something short and readable. That is a deliberate alternative to encoding: %20 is correct but ugly, while a hyphen is both correct and readable. If you publish content, try our Slug Generator to turn titles into clean URL slugs.

Query parameters are the other half of the story. Every key and value in a query string is data, so each one should be passed through encodeURIComponent when the URL is built. Frameworks usually do this for you, but hand-built URLs — in emails, redirects, and API calls — are where encoding gets forgotten.

Encoding also shows up constantly in API work, where data travels in URLs, form bodies, and JSON payloads — our JSON formatter guide covers the data-format side of that world. And if you ever need to validate or match encoded URLs in code, see our regex cheat sheet.

Try It Yourself: Encode and Decode URLs in Your Browser

Reading about percent encoding is useful; seeing it happen is better. Open our URL Encoder / Decoder, paste in any URL or text, and watch the encoded output appear. Paste a URL full of %2520 sequences and decode it to check for double-encoding. The tool runs entirely in your browser — nothing you paste is uploaded to our servers. Ten minutes with the tool teaches what is URL encoding better than ten pages of theory.

Frequently Asked Questions

What does %20 mean in a URL?

%20 is the percent-encoded form of a space. In the ASCII table, a space is character 32 in decimal, which is 20 in hexadecimal — so it is written as %20. And that, in miniature, is what is URL encoding: human characters, translated into % plus hex.

What is the difference between URL encoding and percent encoding?

There is no difference — they are two names for the same thing. “Percent encoding” describes the mechanism (% followed by two hex digits); “URL encoding” describes where it is most commonly used. Students asking what is URL encoding versus what is percent encoding can relax: one system, two names.

What is the difference between + and %20?

Both represent a space, but in different contexts. In a URL path, a space is always %20. In a query string submitted by an HTML form, spaces are traditionally written as +. But a literal plus sign in your data must be encoded as %2B, or it will be misread as a space.

When should I use encodeURI vs encodeURIComponent?

Use encodeURI for a complete URL — it preserves structural characters like : / ? and #. Use encodeURIComponent for a single value you are placing into a URL, like one query parameter. The safe pattern: encode each part with encodeURIComponent, then assemble the URL.

How do I fix a double-encoded URL?

Look for %25 sequences (like %2520) — the fingerprint of double encoding. Decode the value once to reveal the first layer, then fix the source so the value is encoded exactly once. Only ever encode raw, unencoded data.

Which characters never need to be encoded in a URL?

The unreserved characters: letters (A–Z, a–z), digits (0–9), and hyphen (-), underscore (_), period (.), and tilde (~). These are always safe to leave as-is.