Intro

URLs look like plain text, but they follow a strict grammar: only a limited set of characters is allowed, and everything else must be escaped. That is why a space in a web address shows up as %20, and why pasting "my file.pdf" into a link without encoding simply breaks.

This guide explains percent-encoding — the system behind those % symbols — in plain language, shows you when you need it, and points to a free encoder so you never ship a broken link again.

The problem URLs solve

A URL is a precise address built from a strict set of allowed characters: letters, digits, and a handful of symbols like - _ . ~. Everything else — spaces, punctuation, accented letters, emoji — is reserved or unsafe and must be encoded before it can appear in a URL.

Without encoding, the address breaks: a space splits the URL, an & inside a search query gets read as a new parameter, a # starts the fragment and truncates everything after it. Percent-encoding is how arbitrary text survives the trip.

How percent-encoding works

Percent-encoding replaces each unsafe character with a % followed by its two-digit hexadecimal byte value. The rules are simple:

  • A space is %20 (hexadecimal 20 = 32, the space’s ASCII code).
  • Letters and digits pass through unchanged — they are always safe.
  • Some characters are reserved as URL syntax (?, &, =, #, /, :, +) and must be encoded when they appear inside data.
  • Non-ASCII characters are encoded as UTF-8 bytes first: é becomes %C3%A9, and emoji become longer escape sequences.

Tip: Search "hello world" turns into hello%20world. The URL encoder does this for you automatically — for whole strings, not just single characters.

When you actually need to encode

In everyday life, encoding matters most for anything user-generated that ends up in a link:

  • Search queries — ?q=your search terms: spaces and special characters must be encoded or the query truncates.
  • File names with spaces or punctuation — /my file.pdf must become /my%20file.pdf.
  • Sharing links with parameters — if a value contains & or =, it must be encoded or the parameter list corrupts.
  • International text — accented names and emoji in URLs need UTF-8 percent-encoding to work across browsers.

The golden rule: encode data, not structure

The most common mistake is encoding too much. A URL has two parts: the structure (https://, ?, &, =) that makes it a URL, and the data carried inside it (search terms, values, names). Encode the data; leave the structure alone.

And never re-encode something that is already encoded — % becomes %25 and the link quietly breaks. If a URL looks like a string of %20s and %C3%A9s, it is already encoded; decode first if you need to edit it.

Encode components, not the whole structure

A URL contains different components with different syntax: scheme, host, path, query, and fragment. A space in a query value may become %20 or, in form encoding, +; a slash in a path may be a separator rather than data. Encoding the entire URL blindly can turn its separators into data and change where the browser sends the request.

Use a URL parser to identify the component you are changing, then encode the value with the rules for that component. encodeURIComponent is generally intended for an individual query value, while a URL API can assemble structured parts. Decode only once and only at the boundary where encoded data is expected; double-encoding can turn %2F into %252F.

Debugging broken links

Look for spaces, non-ASCII characters, reserved punctuation, unmatched percent signs, and values copied through a system that converted + or &. Compare the parsed path, query keys, and values before and after. Do not put secrets in URLs: browser history, logs, referrers, screenshots, and analytics systems may capture them.

URL encoding is not encryption, HTML escaping, or input validation. It makes data safe to carry in a particular URL component; the receiving application still needs validation and correct interpretation. The URL encoder is best used on the smallest value that needs encoding, not as a repair button for an unknown malformed URL.

Practical takeaway

Parse the URL, identify the component, and encode only the data being placed in that component. Decode once at the correct boundary, watch for double-encoding, and keep secrets out of URLs. The encoder is useful for a precise value; it is not a substitute for URL parsing, validation, or transport security.

FAQ

What is URL encoding?

Percent-encoding: replacing unsafe characters in a URL with a % plus their hex byte value. A space becomes %20, é becomes %C3%A9.

Why does my link break when I paste it?

Because it contains characters like spaces, &, or # that the URL grammar treats as syntax. Encoding the data parts fixes it.

Is URL encoding the same as HTML encoding?

No. URL encoding uses % escapes for URLs; HTML encoding uses entities like & for HTML. They are different systems for different contexts.

How do I encode a URL?

Paste the text into the URL encoder tool and choose Encode. It handles UTF-8 correctly so international characters work.

Should I encode the whole URL or just the values?

Just the data parts — query values, names, paths with special characters. The https://, ?, and & structure must stay unencoded to remain valid.

Sources