What is URL Encoding and Decoding Explained: Complete Guide 2026

1. What is URL Encoding?

URL encoding, also known as percent-encoding, is the process of converting special or reserved characters in a URL into a safe format that can be transmitted without breaking the URL structure.

Decoding is the reverse process, where encoded values (like %20) are converted back to their original characters.

2. When to Use URL Encoding (and When NOT to)

When to Use URL Encoding

• Query parameters in URLs
• User-generated content (search terms, usernames, comments)
• Special characters like space, &, =, ?, #, /

When NOT to Encode

• The protocol (https://)
• The domain name
• The path structure (except for segments that contain special characters)
• The entire URL blindly — only encode the values of query parameters

3. encodeURI vs encodeURIComponent – The Most Important Difference

This is one of the most common sources of confusion and bugs in JavaScript.

// Example 1: encodeURI() - Use for complete URLs
const fullUrl = encodeURI("https://example.com/search?q=hello world");
console.log(fullUrl);
// Output: https://example.com/search?q=hello%20world
// Example 2: encodeURIComponent() - Use for individual query parameter VALUES
const paramValue = encodeURIComponent("hello & world?");
console.log(paramValue);
// Output: hello%20%26%20world%3F

4. Common URL Encoding Mistakes That Break Applications

Here are the most frequent mistakes I’ve seen across projects:

• Not encoding query parameter values
• Double encoding (e.g., %20 becomes %2520)
• Using the wrong function (encodeURI on query values)
• Confusing %20 and + for spaces
• Encoding the entire URL instead of only parameter values

For a deeper dive into these mistakes and how to avoid them, read our detailed guide: Common URL Encoding Mistakes That Break Your Applications.

5. Quick Reference: Common Characters

6. Best Practices for URL Encoding

• Encode only the values of query parameters
• Use built-in language functions instead of manual string manipulation
• Decode before re-encoding to prevent double encoding
• Centralize URL building logic in a utility function
• Test with real user data containing special characters

Need to test your encoding quickly and safely? Try our free, privacy-first URL Encoder & Decoder tool — it runs entirely in your browser.

7. FAQ – URL Encoding Questions Answered

8. Conclusion

URL encoding is a small detail that has a massive impact on the reliability and security of your applications. The most important lesson I’ve learned over 15+ years is this: always encode only the values of query parameters, use the correct functions, and never assume the data is safe.

Mastering URL encoding helps you avoid broken links, security vulnerabilities, and frustrating debugging sessions. Before diving deeper into API design, it’s helpful to understand how APIs are structured. You can read our complete REST API Guide for more context.