URL Encoding Explained: How to Encode and Decode URLs Online

You paste a URL into your browser and it works. You paste the same URL into an API request body and everything breaks. You add a search query with a space in it, and the space vanishes or gets replaced by a plus sign. You copy a URL from your logs and the path contains a string like %2F or %20 that was not there when you built it.

All of these are URL encoding at work - sometimes expected, sometimes surprising. URL encoding (also called percent encoding) is the mechanism that makes it safe to include arbitrary text inside a URL without breaking the URL structure. Understanding it takes about ten minutes, and it will save you from a whole category of subtle bugs.

What URL Encoding Actually Does

A URL has a defined structure with characters that carry special meaning: / separates path segments, ? starts the query string, & separates query parameters, = links parameter names to values, # marks a fragment. If your data contains any of these characters - say, you want to pass the value price=high&low as a query parameter - you have a problem. The browser or server will misinterpret the & and = in your data as structural delimiters.

URL encoding solves this by replacing each unsafe character with a percent sign followed by its two-character hexadecimal code point. A space becomes %20. An ampersand becomes %26. A forward slash becomes %2F. The original character is preserved in an unambiguous representation that cannot be confused with URL structure.

For example:

• Original: search?q=hello world&lang=en
• Encoded: search?q=hello%20world&lang=en

The space in hello world becomes %20, making the URL safe to transmit. Everything else - the ?, &, and = - remains as structural punctuation because it is part of the URL itself, not part of the data.

URL encoding does not make URLs secure or private. It is a formatting convention, not encryption. The encoded data is just as readable - %20 is obviously a space to anyone who knows the standard.

Which Characters Must Be Encoded

URL encoding follows two standards that are often confused: RFC 3986 (the URL specification) and application/x-www-form-urlencoded (the HTML form encoding standard). They differ in how they handle spaces and a few other characters.

RFC 3986: Reserved and Unreserved Characters

The URL specification divides characters into three groups:

Unreserved characters - always safe to use as-is:

• Letters: A-Z, a-z
• Digits: 0-9
• Symbols: -, _, ., ~

Reserved characters - have special meaning in URLs, must be encoded when used as data:

• :, /, ?, #, [, ], @ (structural delimiters)
• !, $, &, ', (, ), *, +, ,, ;, = (sub-delimiters)

Everything else - must always be encoded, including spaces, Unicode characters, and control characters.

The Space Problem

Spaces deserve special attention because they have two valid encodings:

• %20 (RFC 3986) - the correct percent-encoded form of a space
• + (form encoding) - the form submission encoding for a space in query parameters

When you see + in a URL query string, it means a space was submitted via an HTML form. When you construct URLs programmatically, always use %20. Mixing the two - using + in a URL path, for example - is a common source of bugs.

Unicode and Non-ASCII Characters

Characters outside the ASCII range (accented letters, emoji, Chinese characters, Arabic script) must first be converted to UTF-8 bytes, then each byte is percent-encoded. The emoji 😀 is encoded as %F0%9F%98%80 - four bytes in UTF-8, each byte represented as two hex digits.

The URL encoder handles this automatically. Paste text containing any Unicode character and it produces the correctly encoded output, handling the UTF-8 conversion for you.

How to Encode and Decode URLs Online

The practical workflow for URL encoding and decoding is straightforward once you have the right tool.

Encoding a String for Use in a URL

1. Navigate to the URL encoder
2. Paste your raw text - a search term, a file path, an email address, a JSON string, anything
3. Choose the encoding mode:
4. Copy the output and use it in your URL

Example: encoding user@example.com for use as a query parameter value:

• Input: user@example.com
• Output: user%40example.com

The @ is encoded as %40 because it is a reserved character that has structural meaning in URLs (separating username from host).

Decoding a Percent-Encoded String

Decoding is the reverse: you have a percent-encoded string from a URL and want to read the original text.

1. Paste the encoded string (e.g., caf%C3%A9%20au%20lait) into the decoder
2. The tool converts each %XX sequence back to its original character
3. Result: café au lait

This is particularly useful when reading logs, analyzing URL parameters from analytics data, or debugging webhook payloads.

Common Workflow: Encoding JSON in a Query Parameter

Sometimes you need to pass structured data as a query parameter. JSON is a common choice, but it contains characters that must be encoded ({, }, :, ", ,).

1. Format your JSON with the JSON formatter to verify it is valid
2. Copy the JSON string
3. Run it through the URL encoder
4. Append the result to your URL as a query parameter value

Without encoding, ?filter={"status":"active"} breaks most parsers. With encoding, ?filter=%7B%22status%22%3A%22active%22%7D is safe to transmit.

URL Encoding vs. Base64: When to Use Which

URL encoding and Base64 encoding are both ways to represent binary or special-character data as safe ASCII text, but they serve different purposes and produce very different output.

URL Encoding

• Purpose: make arbitrary text safe to use inside a URL
• Output format: mostly human-readable, with %XX sequences for special characters
• Size overhead: minimal for ASCII text, up to 3x for non-ASCII
• Best for: query parameters, path segments, form data

Example: hello world → hello%20world

Base64 Encoding

• Purpose: represent binary data (files, images, credentials) as printable text
• Output format: a stream of alphanumeric characters, +, /, and = padding - not human-readable
• Size overhead: always ~33% larger than the original
• Best for: HTTP Basic Auth headers, embedding images in CSS or HTML, email attachments, data URIs

Example: hello world → aGVsbG8gd29ybGQ=

The base64 encoder handles Base64 encoding and decoding. A common source of confusion: Base64 output contains + and /, which are reserved URL characters. If you need to embed Base64 in a URL, either URL-encode the Base64 output or use Base64url encoding, which replaces + with - and / with _.

A Practical Rule

• Encoding a value that goes into a URL query string or path? Use URL encoding.
• Encoding binary data (file bytes, an image, a cryptographic signature) for transmission over a text protocol? Use Base64.
• Need to verify the integrity of a value without exposing the original? Use the hash generator for a one-way transformation that cannot be reversed.

Common URL Encoding Mistakes

Encoding bugs are subtle because the URL usually still works - just not correctly. Here are the patterns that cause the most problems.

Double Encoding

Double encoding happens when you encode an already-encoded string. The % in %20 gets encoded to %25, producing %2520 instead of %20. The decoded result is %20 as a literal string, not a space.

This usually happens when encoding happens at multiple layers - your code encodes the value, and a library or framework encodes it again. The fix is to encode exactly once, at the point where you construct the URL, and let nothing downstream re-encode it.

Not Encoding When Constructing URLs with String Concatenation

Building URLs by concatenating strings without encoding is the root of most injection vulnerabilities and malformed URL bugs:

` // Dangerous - user input goes directly into the URL const url = "/search?q=" + userInput;

// Safe - encode the value before inserting const url = "/search?q=" + encodeURIComponent(userInput); `

In JavaScript, encodeURIComponent encodes everything except unreserved characters. It is the right function for encoding individual query parameter values. encodeURI is for encoding a complete URL and preserves structural characters - use it more carefully.

Encoding the Wrong Thing

A full URL like https://example.com/search?q=hello world should NOT have its entire string run through encodeURIComponent - that would encode the ://, /, and ? that are part of the URL structure. You should only encode the individual values that go into the URL, not the URL itself.

The URL encoder offers both modes: encode a component (a value) versus encode a URI (a full URL). Choosing the wrong mode produces output that looks encoded but is either over-encoded or under-encoded.

Forgetting Non-ASCII in Paths

File paths and slugs often contain accented characters, especially for non-English content. A file named café-menu.pdf has an é that must be percent-encoded in URLs. On many servers, unencoded non-ASCII in the path works locally but fails when the URL is shared, bookmarked, or processed by a system with different locale settings. Always encode non-ASCII path segments.

Frequently Asked Questions

What does %20 mean in a URL?

%20 is the percent-encoded representation of a space character. The number 20 is the hexadecimal value of the ASCII code for a space (decimal 32). Whenever a space appears in a URL segment that was encoded following RFC 3986, it becomes %20. In form-submitted query strings, you may see + instead - both represent a space, but they come from different encoding conventions.

Is URL encoding the same as URI encoding?

Nearly. URI (Uniform Resource Identifier) is the broader standard; URL (Uniform Resource Locator) is a subset. The encoding rules are defined in RFC 3986 for URIs, and the same rules apply to URLs. In practice, developers use "URL encoding" and "URI encoding" interchangeably to refer to percent encoding.

How do I URL encode in JavaScript?

JavaScript provides two built-in functions: encodeURIComponent(value) encodes a single value for use in a URL component (a query parameter value, a path segment). It encodes everything except letters, digits, and -_.!~*'(). encodeURI(url) encodes a complete URL and preserves the structural characters (://, /, ?, &, =, #). For most cases - inserting user input into a query string - encodeURIComponent is what you want.

Why do some URLs show %2F and others show a literal slash?

A literal / in a URL path is a path separator. %2F is a forward slash that should be treated as data, not a separator. For example, if a file is stored under a path like 2026/05/report.pdf and you want to pass the full path as a single query parameter value, you must encode the slashes: ?file=2026%2F05%2Freport.pdf. If you left the slashes unencoded, the server would interpret them as additional path segments rather than as part of the parameter value.

Does URL encoding protect against SQL injection or XSS?

No. URL encoding is a formatting mechanism, not a security measure. It makes special characters safe to include in URLs, but it does not sanitize input for use in SQL queries or HTML output. Always use parameterized queries to protect against SQL injection, and always HTML-escape output to protect against XSS. URL encoding and security encoding are separate concerns that should be applied independently at the appropriate layer.