URL Encoding Explained (Percent-Encoding)
URLs may only contain a restricted set of ASCII characters, and some of those characters have structural meaning. Percent-encoding is how everything else — spaces, accents, ampersands, emoji — travels safely inside a link.
How percent-encoding works
Each unsafe byte is written as a percent sign followed by two hexadecimal digits. A space is byte 0x20, so it becomes %20. Non-ASCII characters are first converted to UTF-8 bytes, then each byte is encoded: é is two bytes and becomes %C3%A9.
| Character | Encoded | Why it matters |
|---|---|---|
| space | %20 | Breaks the URL when left raw |
| & | %26 | Separates query parameters |
| = | %3D | Separates key from value |
| ? | %3F | Starts the query string |
| # | %23 | Starts the fragment — everything after is never sent to the server |
| / | %2F | Path separator |
| + | %2B | Means space in form encoding |
| % | %25 | The escape character itself |
encodeURI vs encodeURIComponent
This is the decision that causes most bugs. encodeURI is for a whole URL and deliberately leaves structural characters alone. encodeURIComponent is for one piece of a URL and encodes everything that could be structural.
const q = "coffee & cake?";
encodeURI("https://x.com/s?q=" + q);
// https://x.com/s?q=coffee%20&%20cake? <- broken: & and ? survive
"https://x.com/s?q=" + encodeURIComponent(q);
// https://x.com/s?q=coffee%20%26%20cake%3F <- correct
// Best of all, let the platform do it:
const url = new URL("https://x.com/s");
url.searchParams.set("q", q);Rule of thumb: encode values, never whole URLs. If you are building a query string, use URLSearchParams and stop thinking about it.
%20 or +?
Both appear because two specifications overlap. In a path segment, a space must be %20. In an application/x-www-form-urlencoded query string — what HTML forms produce — a space is +, and a literal plus must be written as %2B. Decoders that treat + as a literal plus in query strings are a frequent source of mangled search terms.
Double encoding
?q=coffee%2520%2526%2520cake?q=coffee%20%26%20cakeThe tell-tale sign is %25 followed by more hex digits: the percent sign of the first pass got encoded again. It normally happens when a value is encoded by application code and then again by a framework, proxy or template. Encode exactly once, at the boundary where the URL is assembled.
URL Encoder
Encode or decode URLs and query values, and spot double encoding immediately.
Common mistakes
Using encodeURI on a query value
It leaves &, ?, = and # intact, so a value containing them silently breaks the parameter structure.
Encoding an already-encoded string
Decode first if you are unsure of the input's state, or better, track it explicitly.
Expecting the fragment to reach the server
Everything after # stays in the browser. Server-side code never sees it.
Hand-rolling encoders
Use URL and URLSearchParams. They implement the specification, including edge cases you will forget.
Frequently asked questions
What is %20 in a URL?
A percent-encoded space. Spaces are not allowed literally in a URL, so they are written as %20 (or + inside a form-encoded query string).
When should I use encodeURIComponent?
Whenever you insert a value into a path segment or query parameter. Use encodeURI only on a complete URL you assembled yourself.
How do I detect double encoding?
Look for %25 followed by two hex digits. Decoding the string twice and comparing the results also reveals it.
Do non-English characters need encoding?
Yes. They are converted to UTF-8 bytes and each byte is percent-encoded, though browsers often display the decoded form in the address bar.
Put this into practice
URL Encoder runs entirely in your browser — no upload, no account, no limits.
Open URL EncoderRelated tools
Related guides
Base64 Explained: What It Is and When to Use It
How Base64 turns binary into text, why output is about 33% larger, where padding comes from, URL-safe variants, and why Base64 is encoding rather than encryption.
Regex Basics: Patterns You Will Actually Use
Learn regular expressions from the parts that matter: character classes, quantifiers, anchors, groups, greedy vs lazy matching, flags and the pitfalls that cause bugs.
What Is JSON? A Plain-English Guide
JSON explained without jargon: what it is, how the syntax works, which data types it supports, where it is used and how it differs from JavaScript objects.
JWT Explained: Structure, Claims and Safe Use
What a JSON Web Token contains, how the three segments work, which claims matter, how signatures are verified and the mistakes that turn JWTs into a security hole.
JSON vs XML: Which Format Should You Use?
A practical JSON vs XML comparison: syntax, size, parsing speed, schemas, comments, attributes and metadata — plus clear guidance on which format fits which job.
PNG vs JPG vs WebP: Which Image Format to Use
Compare PNG, JPG, WebP and AVIF on compression, transparency, quality and browser support, with a simple decision guide for photos, screenshots, logos and animation.