URL Encoding Explained: When and Why You Need It

Have you ever pasted a URL into a browser and seen strange sequences like %20, %3A, or %2F? Those are percent-encoded characters, and they exist because URLs have strict rules about which characters are allowed. Understanding URL encoding saves you from broken links, failed API calls, and frustrating debugging sessions.

What Is URL Encoding?

URL encoding (also called percent encoding) is a mechanism for converting characters that are not allowed in URLs into a safe format. It replaces unsafe characters with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII code.

Common examples:

Why URL Encoding Matters

1. URLs Have Reserved Characters

Characters like ?, &, =, #, and / have special meaning in URLs. If your data contains these characters, the browser or server will misinterpret them unless they are encoded.

Consider this search URL:
https://example.com/search?q=Tom & Jerry

The browser sees & as a parameter separator, breaking the query. The correct URL is:
https://example.com/search?q=Tom%20%26%20Jerry

2. Non-ASCII Characters Need Encoding

URLs must use ASCII characters only. International characters (Chinese, Arabic, emoji, accented letters) must be UTF-8 encoded first, then percent-encoded. For example, the Japanese word "Tokyo" (µØ▒õ║¼) becomes %E6%9D%B1%E4%BA%AC.

3. API Calls Break Without Encoding

When building API requests with user-supplied data in query parameters, you must encode the values. Failing to do so causes malformed requests, 400 errors, or worse — injection vulnerabilities.

How to Encode and Decode URLs

Encoding a URL

1. Open our free URL Encoder
2. Paste the text that needs encoding (e.g., a search query with special characters)
3. Get the percent-encoded output instantly
4. Use the encoded string in your URL, API call, or form data

Decoding a URL

1. Open our free URL Decoder
2. Paste the percent-encoded URL or string
3. See the human-readable original text

URL Encoding in Different Contexts

Query Parameters

The most common use case. When passing user input as URL parameters, always encode the values:

// JavaScriptconst query = encodeURIComponent("price < $50 & color = blue");// Result: "price%20%3C%20%2450%20%26%20color%20%3D%20blue"fetch(`/api/search?q=${query}`);

Form Data

When forms use GET method, the browser automatically URL-encodes form values. With POST and application/x-www-form-urlencoded content type, the body is URL-encoded. Spaces become + instead of %20 in form encoding.

Path Segments

File paths in URLs need encoding if they contain spaces or special characters. A file named "my report (final).pdf" becomes my%20report%20%28final%29.pdf in a URL.

Email and Redirects

URLs embedded in emails or passed as redirect parameters must be fully encoded to prevent breaking. A redirect URL like ?redirect=https://example.com/page?id=5 will break because of the nested ? and =. Properly encoded: ?redirect=https%3A%2F%2Fexample.com%2Fpage%3Fid%3D5.

Common Mistakes

• Double encoding: Encoding an already-encoded URL produces %2520 instead of %20. Use our URL Decoder to check if a string is already encoded before encoding it again.
• Encoding the entire URL: Only encode the values, not the structure. https:// should stay as-is — only query parameter values and path segments with special characters need encoding.
• Using the wrong function: In JavaScript, use encodeURIComponent() for values and encodeURI() for full URLs. They handle reserved characters differently.

Quick Reference

• URL Encoder — encode special characters for safe use in URLs
• URL Decoder — decode percent-encoded strings back to readable text

Both tools are free, instant, and require no sign-up. Bookmark them for the next time a broken URL has you pulling your hair out.