Guide6 min readJune 4, 2026

URL Encoding Explained: What %20 Means and How to Encode Special Characters

A complete guide to URL encoding (percent encoding): why spaces become %20, which characters must be encoded, the difference between encodeURI and encodeURIComponent, and how to encode URLs free online.

You have seen it before: a URL that looks like https://example.com/search?q=hello%20world. What is %20? Why does it appear instead of a space? And how do you encode URLs correctly in your own projects?

What Is URL Encoding?

URL encoding (also called percent encoding) is the process of converting characters that are not allowed in a URL into a safe format. The conversion replaces each disallowed byte with a percent sign (%) followed by two hexadecimal digits representing the byte value.

A space (ASCII 32, hex 20) becomes %20. The @ symbol (ASCII 64, hex 40) becomes %40. The Chinese character 你 (UTF-8 bytes E4 BD A0) becomes %E4%BD%A0.

%20 is not a bug, a typo, or broken code. It is a space character that has been correctly encoded for use in a URL. When the browser or server decodes the URL, %20 becomes a space again.

Why Do URLs Need Encoding?

The URL specification (RFC 3986) defines a limited set of characters that are allowed directly in a URL:

  • ▸Letters: A–Z, a–z
  • ▸Digits: 0–9
  • ▸Unreserved symbols: - _ . ~
  • ▸Reserved symbols that have structural meaning: / ? # [ ] @ ! $ & ' ( ) * + , ; =

Everything else — spaces, accented characters, Unicode, most punctuation — must be percent-encoded. If a URL contains raw spaces or non-ASCII characters, different browsers may interpret it differently or fail to parse it correctly.

Common Percent-Encoded Characters

  • ▸Space → %20 (or + in form query strings)
  • ▸! → %21
  • ▸" → %22
  • ▸# → %23
  • ▸$ → %24
  • ▸% → %25 (the percent sign itself)
  • ▸& → %26
  • ▸' → %27
  • ▸( → %28
  • ▸) → %29
  • ▸+ → %2B
  • ▸, → %2C
  • ▸/ → %2F
  • ▸: → %3A
  • ▸; → %3B
  • ▸= → %3D
  • ▸? → %3F
  • ▸@ → %40

encodeURI vs encodeURIComponent — What Is the Difference?

JavaScript provides two built-in URL encoding functions, and choosing the wrong one is a very common bug.

  • ▸encodeURI(url) — encodes a complete URL. It does NOT encode the structural characters / ? # : @ because those are valid URL separators that must remain intact. Use this when encoding a full URL.
  • ▸encodeURIComponent(value) — encodes a value that will be used as part of a URL (like a query parameter value). It DOES encode / ? # : @ and everything else — everything except A–Z, a–z, 0–9, - _ . ! ~ * ' ( )

The most common URL encoding mistake: using encodeURI() for a query parameter value. If the value contains & or =, encodeURI() will not encode them, breaking the query string. Always use encodeURIComponent() for individual parameter values.

Practical Examples

  • ▸Encoding a search query: encodeURIComponent("hello world & more") → "hello%20world%20%26%20more"
  • ▸Encoding a full URL: encodeURI("https://example.com/search?q=hello world") → "https://example.com/search?q=hello%20world"
  • ▸Building a query string: "?name=" + encodeURIComponent(name) + "&city=" + encodeURIComponent(city)
  • ▸URL in a meta tag: content="https://example.com/?ref=google%20ads"

URL Encoding vs HTML Encoding

These are often confused. URL encoding uses % sequences (%20 for space). HTML encoding uses named or numeric entities (& for &,   for non-breaking space,   for space). When you put a URL in an HTML href attribute, it needs URL encoding. When you put text in HTML content, it needs HTML encoding. They are two separate processes for two different contexts.

How to Encode / Decode URLs Online

  1. 1.Open the URL Encoder / Decoder tool (link below)
  2. 2.Select Encode or Decode mode
  3. 3.Paste your URL or text in the input box
  4. 4.The encoded or decoded output appears instantly in the right panel
  5. 5.Use the Swap button to flip the output back into the input for chaining operations

Frequently Asked Questions

What is the difference between %20 and + in URLs?▾
%20 is the correct percent-encoding of a space in any part of a URL. The + sign represents a space only in the query string portion of a URL (application/x-www-form-urlencoded format, used by HTML forms). In path segments, + is a literal plus sign, not a space.
Should I encode the entire URL or just the query parameters?▾
Encode individual query parameter values using encodeURIComponent(). Do not encode the entire URL with encodeURIComponent() — that would encode the slashes and colons and produce an invalid URL.
How do I decode %E2%80%99 or other multi-byte sequences?▾
%E2%80%99 is the UTF-8 encoding of the right single quotation mark ('). Multi-byte UTF-8 sequences produce three percent-encoded byte pairs. decodeURIComponent("%E2%80%99") returns the correct Unicode character.
Is URL encoding case-sensitive?▾
The percent sign and the two hex digits are case-insensitive per the RFC — %20 and %2F are equivalent to %20 and %2f. In practice, always use uppercase hex digits (%2F, not %2f) to match convention and avoid edge-case compatibility issues.

Paste any URL or text and encode or decode it instantly — with one-click swap between modes.

Encode / Decode URLs Free →
← Back to all posts