Why URLs Need Encoding (And How to Do It Correctly)
A URL is allowed a restricted set of characters, and several of those have jobs to do - a question mark starts the query, an ampersand separates parameters, a hash starts a fragment. Percent-encoding lets you include a character as data rather than as punctuation. The URL Encoder and Decoder handles it both ways.
How it works
Each byte that needs escaping is written as a percent sign followed by its two-digit hexadecimal value. A space becomes percent-twenty. An ampersand becomes percent-twenty-six. A slash becomes percent-two-F.
Multi-byte characters become several escapes, one per byte, which is why an accented letter or an emoji expands into a long run of percent signs. That looks alarming and is correct.
What has to be encoded
Anything with a structural meaning, when you mean it literally: the ampersand, the question mark, the hash, the equals sign, the plus sign, the slash and the colon. Also the space, and every character outside the plain ASCII letters, digits, hyphen, underscore, full stop and tilde.
The ampersand is the one that causes real damage. A product name containing one, dropped unencoded into a query string, splits that parameter in two - and the second half becomes a parameter nobody expected. That is not only a broken link; it is how parameter-injection bugs happen.
Encode the parts, not the whole
The commonest mistake is encoding a finished URL. That escapes the slashes and the question mark that were doing their jobs, and the result is not a URL at all.
Encode each value before assembling it. The path, each query parameter name and each query parameter value are encoded individually, then joined with the slashes, question mark and ampersands left as real characters. If you build URLs in code, use the function meant for a component rather than the one for a whole URI - most languages provide both, and the difference between them is exactly this.
A space can also be a plus
In the query string, a plus sign is a legacy way of writing a space, inherited from HTML forms. So a plus in a query string may mean a space, and a literal plus must be written as percent-two-B. In the path, a plus is just a plus. It is an inconsistency worth knowing about when a phone number loses its country-code plus somewhere between a form and a database.
Common questions
Why does my URL work in the browser but not in code?
Browsers quietly fix some invalid URLs. Libraries and servers do not. Encode properly rather than relying on the browser's tolerance.
Should I encode a slug?
A slug from the Text to Slug Converter contains only safe characters by design, so it needs no encoding - which is one of the reasons to use one.
Is encoding the same as Base64?
No. They solve different problems, and Base64 output still needs URL encoding unless the URL-safe variant is used.
Why do I see percent-twenty-five in a URL?
That is an encoded percent sign, and a run of them usually means something encoded the URL twice.
Got a value to put safely into a URL?