URL Encoding Explained: How to Encode and Decode URLs

# URL Encoding Explained: How to Encode and Decode URLs

URLs can only contain a limited set of characters. When you need to include spaces, special characters, or non-ASCII text in a web address, they must be converted into a format the browser can understand. This process is called URL encoding (also known as percent-encoding). This guide explains how it works, when you need it, and the most common encoding patterns.

What Is URL Encoding?

URL encoding replaces unsafe or reserved characters with a percent sign (%) followed by their hexadecimal ASCII code. For example, a space becomes `%20`, and an ampersand (&) becomes `%26`.

Example:

This ensures the URL is transmitted correctly across the internet without ambiguity.

Why URL Encoding Is Necessary

URLs have a strict syntax defined by RFC 3986. Certain characters have special meanings:

If you want to use any of these characters as literal data (not as structural elements), you must encode them. Otherwise, the browser interprets them as URL syntax.

Example problem:

You're searching for "C++ programming" on a website:

How Percent-Encoding Works

The Algorithm

Example: The space character

Example: The emoji character (multi-byte UTF-8)

Characters That DON'T Need Encoding

These characters are safe to use in URLs without encoding:

Everything else should be encoded if used as data (not as URL structure).

Common URL Encoding Reference

Space Encoding: %20 vs. +

You'll see spaces encoded two ways:

In practice:

Both are valid in query strings, but %20 is the more universal encoding that works everywhere.

URL Encoding in Programming

JavaScript

// Encode a URI component (query parameters, path segments)
encodeURIComponent("Hello World & Friends")
// Returns: "Hello%20World%20%26%20Friends"

// Encode a full URI (preserves ://?#& structure)
encodeURI("https://site.com/path?q=hello world")
// Returns: "https://site.com/path?q=hello%20world"

// Decode
decodeURIComponent("Hello%20World%20%26%20Friends")
// Returns: "Hello World & Friends"

Important difference:

Use `encodeURIComponent()` for individual parameters. Use `encodeURI()` for complete URLs.

Python

from urllib.parse import quote, unquote, urlencode

# Encode a string
quote("Hello World & Friends")
# Returns: "Hello%20World%20%26%20Friends"

# Encode query parameters
urlencode({"q": "Hello World", "lang": "en"})
# Returns: "q=Hello+World&lang=en"

# Decode
unquote("Hello%20World%20%26%20Friends")
# Returns: "Hello World & Friends"

Common URL Encoding Mistakes

1. Double Encoding

Encoding an already-encoded string produces garbled results:

Always check if data is already encoded before encoding it again.

2. Not Encoding User Input

When building URLs with user-supplied data, always encode the values:

// Dangerous — user input is not encoded
const url = `/search?q=${userInput}`;

// Safe — user input is encoded
const url = `/search?q=${encodeURIComponent(userInput)}`;

Failing to encode user input can lead to broken URLs and security vulnerabilities like injection attacks.

3. Encoding the Entire URL

Don't encode the full URL including the protocol, domain, and path separators:

- Result: `https%3A%2F%2Fsite.com%2Fpath%3Fq%3Dtest` (broken)

Only encode the data portions, not the structural elements.

4. Forgetting to Decode on the Server

If you encode data in a URL, the receiving server must decode it. Most web frameworks handle this automatically, but custom URL parsing code might not.

URL Encoding and Security

Cross-Site Scripting (XSS) Prevention

URL encoding is part of preventing XSS attacks. If user input is included in URLs without encoding, attackers can inject malicious scripts:

Always encode user input in URLs, and always decode and sanitize on the server side.

SQL Injection via URLs

Similar to XSS, unencoded URL parameters can carry SQL injection payloads. URL encoding is one layer of defense (but not the only one — always use parameterized queries).

Free URL and Data Tools

Work with URLs and data encoding with these free Tovlix tools:

Conclusion

URL encoding ensures that special characters in web addresses are transmitted correctly. Use `%20` for spaces, encode all user-supplied data in URLs, and be careful not to double-encode. In JavaScript, use `encodeURIComponent()` for individual values and `encodeURI()` for full URLs. URL encoding is also a security essential — it helps prevent XSS and injection attacks. Use our free URL Encoder/Decoder for quick encoding and decoding without writing code.