URL Encoding Explained: A Complete Guide

Why URLs need encoding, which characters must be escaped, and how percent-encoding works.

basicswebhttp

Why URLs Need Encoding

URLs can only contain a limited set of characters from the ASCII character set. When you need to include special characters, spaces, or non-ASCII characters in a URL, they must be encoded.

Reserved Characters

These characters have special meaning in URLs:

CharacterPurpose
/Path separator
?Query string start
&Parameter separator
=Key-value separator
#Fragment identifier
:Scheme separator
@User info separator

How Percent-Encoding Works

Each unsafe character is replaced with % followed by its hexadecimal ASCII value:

  • Space → %20
  • &%26
  • =%3D
  • ?%3F

Example

Original: https://example.com/search?q=hello world&lang=en
Encoded: https://example.com/search?q=hello%20world&lang=en

Common Gotchas

  • Spaces: Can be %20 or + (in query strings only)
  • Double encoding: Encoding already-encoded strings creates bugs
  • UTF-8: Non-ASCII characters are first converted to UTF-8 bytes, then percent-encoded

Frequently Asked Questions

Common questions about this topic

Historical reasons: application/x-www-form-urlencoded (HTML forms) uses + for spaces, while RFC 3986 (URI standard) uses %20. In URL paths, use %20. In query strings, both work but %20 is more universal. The URL API uses + in query params.

Encode only user-provided values, not the URL structure. Use encodeURIComponent() for query parameter values, path segments with special characters. Don't encode the entire URL - that would break the structure (://?&= have meaning).

Percent-encoding (URL encoding) replaces unsafe characters with %XX where XX is the hexadecimal ASCII value. Example: space (ASCII 32) becomes %20, ampersand (ASCII 38) becomes %26. This ensures only safe ASCII characters appear in URLs.