URL Encoding Explained: Spaces, Special Characters & Real Examples

Reserved vs unreserved characters

• Unreserved (usually don’t encode): A–Z a–z 0–9 - _ . ~
• Reserved (special meaning, encode if literal): ! * ' ( ) ; : @ & = + $ , / ? # [ ]

Example: In a query string, & separates parameters, so a literal ampersand inside a value must be encoded as %26.

Spaces: %20 vs +

In the query part, spaces are often encoded as + (form-style) or %20. In the path, always use %20. When in doubt, %20 is universally safe.

Path vs query encoding (why two functions?)

• Path segments (e.g., /files/my report.pdf): encode everything unsafe; don’t turn spaces into +.
• Query strings (e.g., ?q=my report&lang=en): encode values and names; + is acceptable for spaces.

This is why languages provide different helpers like encodeURI vs encodeURIComponent or rawurlencode vs urlencode.

Code examples (JavaScript, Python, PHP)

JavaScript

// Good defaults:
// - encodeURIComponent: for query parameter names/values
// - encodeURI: for full URLs (keeps : / ? # & =)
const base = "https://example.com/search";
const params = new URLSearchParams({
  q: "URL encoding & spaces",
  lang: "en-US"
});
const full = base + "?" + params.toString();
console.log(full);
// https://example.com/search?q=URL+encoding+%26+spaces&lang=en-US

// Encoding a PATH segment
const filename = "my report (final).pdf";
const url2 = "https://example.com/files/" + encodeURIComponent(filename);
console.log(url2);
// https://example.com/files/my%20report%20(final).pdf

Python

from urllib.parse import urlencode, quote, quote_plus

# Query params
params = {"q": "URL encoding & spaces", "lang": "en-US"}
qs = urlencode(params)  # uses quote_plus (spaces -> +)
print("https://example.com/search?" + qs)

# Path segment
filename = "my report (final).pdf"
print("https://example.com/files/" + quote(filename))        # %20 for space
print("https://example.com/files/" + quote_plus(filename))    # + for space (avoid in path)

PHP

<?php
// Query params (spaces -> +)
$params = http_build_query(["q" => "URL encoding & spaces", "lang" => "en-US"]);
echo "https://example.com/search?$params\n";

// Path segment
$filename = "my report (final).pdf";
echo "https://example.com/files/" . rawurlencode($filename) . "\n"; // %20
// Avoid urlencode() for paths because it turns spaces into +
?>

Common mistakes (and how to fix them)

• Double-encoding: Don’t run %20 through an encoder again (it becomes %2520). Decode once before re-encoding.
• Encoding the whole URL with the wrong function: In JS, use encodeURI for the full URL, encodeURIComponent for parts.
• Using + in paths: Browsers don’t treat + as a space in path segments—use %20.
• Not encoding non-ASCII characters: Always encode Unicode characters in paths and query values for compatibility.
• Breaking analytics: Unencoded & inside values can split parameters. Encode it as %26.

SEO & analytics tips

• Human-friendly slugs: use lowercase, hyphens, and encode spaces as %20 if they must appear (better: avoid spaces altogether).
• Stable URLs: don’t change encoding schemes later (e.g., switching + to %20) without redirects.
• Consistent tracking: always encode query values the same way to avoid duplicate dimensions in analytics.

Test quickly with our URL Encoder / Decoder and verify titles/descriptions with the Meta Tag Analyzer.