What is URL Encoding? Complete Guide with Examples
URL encoding (percent-encoding) is the mechanism for encoding characters that have special meaning in URLs or aren't allowed in URL syntax. Characters are replaced with a percent sign (%) followed by their hexadecimal ASCII/UTF-8 value. For example, a space becomes %20, an ampersand becomes %26, and non-ASCII characters like é become multi-byte sequences like %C3%A9.
How Does URL Encoding Work?
URLs can only contain a limited set of unreserved characters (A-Z, a-z, 0-9, -, _, ., ~). All other characters must be percent-encoded: the character is converted to its UTF-8 byte representation, and each byte is encoded as %XX where XX is the hexadecimal value. Reserved characters (/, ?, #, &, =) have special URL meaning and must be encoded when used as data values rather than delimiters. JavaScript provides encodeURIComponent() for encoding data values and encodeURI() for encoding complete URIs.
Key Features
- Percent-encoding of special characters (%20 for space, %26 for &, %3D for =)
- UTF-8 support for encoding international characters in URLs
- Distinction between reserved characters (structural) and unreserved characters (data)
- JavaScript functions: encodeURIComponent (data values) vs encodeURI (full URLs)
- Form encoding (application/x-www-form-urlencoded) where spaces become + instead of %20
Common Use Cases
Query String Parameters
When passing user input as URL query parameters, special characters must be encoded to prevent breaking the URL structure. A search for 'cats & dogs' becomes '?q=cats%20%26%20dogs'.
API Request Building
Programmatically constructing API URLs requires encoding parameter values that may contain reserved characters, ensuring the URL parses correctly on the server.
Form Data Submission
HTML forms with method=GET encode field values in the URL using application/x-www-form-urlencoded format, where spaces become + and special characters are percent-encoded.