Learn what URL encoding is, why special characters need percent-encoding in URLs, and how it differs from Base64.
URLs can only safely contain a limited set of characters. URL encoding is the mechanism that lets everything else (spaces, punctuation, non-English text) travel inside a URL without breaking it.
A URL is really just a piece of text with a strict structure, and certain characters in that text have special meaning: a ? marks the start of a query string, a / separates path segments, an & separates parameters, and so on. URL encoding replaces characters that either have special meaning or aren’t allowed in a URL with a safe, standardized substitute, so the data can be included without confusing the parts of the URL around it.
Encoding matters most when a value inside a URL, like a search query typed by a user, might contain characters that clash with the URL’s own syntax. A few common cases:
?, &, #, and / that already mean something in URL structure need encoding when they appear as literal data rather than structure.For example, a space is commonly represented as:
%20This is called percent-encoding: a % followed by two hexadecimal digits representing the character’s byte value.
Here are a few examples of how encodeURIComponent, the standard JavaScript URL-encoding function, handles common characters:
| Character | Encoded |
|---|---|
| Space | %20 |
@ |
%40 |
& |
%26 |
? |
%3F |
Not every character gets encoded, and exactly which ones do can depend on context. For instance, !, *, ', (, and ) are left unencoded by JavaScript’s encodeURIComponent, even though older standards classify some of them as reserved. Different tools, languages, and encoding functions can draw the line in slightly different places, so it’s worth checking the specific one you’re using rather than assuming a single universal rule.
It helps to separate two different ideas: the structure of a URL, and the encoding applied to the data inside it. A URL is made up of several components:
https://example.com/search?q=coffee+shops#resultsURL encoding is applied to the values inside these components, particularly the path and query parameters, not to the structural characters that separate them. To break a real URL down into these pieces and inspect each one, the URL Parser does this automatically.
Say a user searches for coffee & tea shop? on a site that puts the query directly into the URL. Encoded for use as a query parameter, it becomes:
coffee%20%26%20tea%20shop%3FEach space became %20, the & became %26 (so it isn’t mistaken for a parameter separator), and the ? became %3F. Without encoding, the & and ? in the raw text would be misread as URL structure instead of part of the search term.
These two solve different problems. URL encoding makes text safe to place inside a URL by escaping characters that clash with URL syntax. Base64 converts binary data into text using a completely different character set and process, with no connection to URL structure at all. This comes up, for example, when a URL parameter needs to carry a small piece of What Is JSON? data: the JSON is often Base64-encoded first, and the whole result is URL-encoded on top. See What Is Base64 Encoding? for how that first step works.
To convert text to and from its encoded form without doing it by hand, use the URL Encoder & Decoder.
URL Encoder & Decoder
URL encoding, also called percent-encoding, is a way of representing characters inside a URL that would otherwise be unsafe or have a conflicting special meaning, by replacing them with a % followed by a two-digit hexadecimal code.
A raw space isn’t a valid character inside a URL. Encoding it as %20 lets the URL include spaced-out text, like a multi-word search term, without breaking.
%20 is the percent-encoded representation of a space character.
No. They’re different techniques for different purposes: URL encoding escapes characters that conflict with URL syntax, while Base64 converts binary data into text using an entirely different character set.
No. Only characters that are unsafe or have special meaning in the given context need encoding. Encoding everything, including already-safe characters like letters and digits, is unnecessary and makes URLs harder to read.
Percent encoding is the formal name for the mechanism URL encoding uses: representing a character as a % sign followed by its byte value written in hexadecimal.
Find the right tool, or keep reading Brekzy's other guides.