Uvlio

Command Palette

Search for a command to run...

Back to articles
Technical Article

URL Encoding Explained: Percent Encoding, Query Strings, and Safe Links

URLs look like ordinary text, but many characters have structural meaning. A slash separates path segments, a question mark starts the query, an ampersand separates parameters, and a hash starts the fragment. URL encoding, also called percent encoding, lets data contain characters that would otherwise be read as structure. Most broken links and malformed query strings come from encoding the wrong layer or not encoding at all.
Uvlio editorial team by limitcool2026-05-177 min read
Topic coverDeveloperURL Encoder / DecoderBase64 Encoder / Decoder

URL Encoding Explained: Percent Encoding, Query Strings, and Safe Links

A technical article on percent encoding, query parameters, path segments, form encoding, and why URLs break when reserved characters are copied raw.

Guide subject preview
Identify part
Encode value
Test link
Tool stack
URL Encoder / DecoderBase64 Encoder / Decoder
Reading focus
1Identify part
2Encode value
3Test link

Original workflow visual

URL Encoding Explained: Percent Encoding, Query Strings, and Safe Links

This original Uvlio visual summarizes the practical path from input inspection to output review for this workflow.
1

Identify part

Review before moving forward

2

Encode value

Review before moving forward

3

Test link

Review before moving forward

Maintainer and review note
Maintained by limitcool. Use it to understand the technical model, processing boundaries, privacy risks, and verifiable behavior.
URLs have different parts

A full URL can include scheme, host, path, query, and fragment. Each part has its own rules. A slash inside a path means something different from a slash inside a query value. Encoding should happen at the component level, not by blindly encoding or decoding the entire URL. If you encode the whole URL, you may hide structural separators. If you encode nothing, data characters may be interpreted as structure.

Percent encoding represents bytes

Percent encoding writes a byte as percent followed by two hexadecimal digits. Spaces, non-ASCII text, and reserved characters can be represented this way after choosing an encoding such as UTF-8. For example, a query value containing an ampersand must encode that ampersand so it does not split the parameter. The goal is not decoration; it is preserving data boundaries.

Query strings need key-value discipline

Query strings commonly use name=value pairs separated by ampersands. Both names and values can require encoding. A value such as "red & blue" should not be pasted raw, because the ampersand may start a new parameter. Rebuilding query strings with a structured API is safer than string concatenation. It also handles repeated keys, empty values, and ordering more predictably.

Plus signs are context-dependent

In application/x-www-form-urlencoded data, a plus sign often represents a space. In other URL contexts, plus can be a literal plus. This difference causes bugs in search URLs, email links, and encoded tokens. If a value contains plus signs that matter, test the exact parser that will receive the URL. Do not assume all URL decoding rules are identical across path, query, and form bodies.

Double encoding creates strange output

Double encoding happens when an already encoded value is encoded again. A percent sign becomes %25, so %20 can turn into %2520. The receiving system decodes once and still sees encoded-looking text. Double decoding is also risky because it can turn safe-looking strings into active separators. A clear workflow should mark whether a value is raw, encoded once, or already part of a URL.

Fragments do not reach the server

The fragment after a hash is handled by the browser and usually not sent in HTTP requests. This matters for debugging analytics, authentication redirects, and client-side routing. Encoding a value into the fragment can be useful for browser-only state, but the backend will not see it in the normal request path. If the server needs the value, put it in the path or query according to the API design.

A safe link-building workflow

Start by identifying the URL component you are building. Keep raw values separate from structural separators. Encode each path segment or query value with a component-aware API. Build the URL, parse it back, and confirm the resulting parameters match what you intended. For user-generated links, validate allowed schemes and hosts too. Encoding preserves syntax; it does not decide whether a destination is safe.

Common Questions

Should I encode an entire URL or each component?

Usually encode individual components such as path segments and query values, then assemble the URL structure.

Why did %20 become %2520?

The percent sign was encoded again, which is a common sign of double encoding.

Is URL encoding a security feature?

It prevents syntax confusion, but it is not a complete security control. You still need validation and authorization.

What should I test in a query string builder?

Test spaces, ampersands, plus signs, equals signs, non-ASCII text, empty values, repeated keys, and values that already contain percent signs. These cases reveal whether your code is encoding raw values once or accidentally encoding an already assembled URL.

Why can a copied link work in one app and fail in another?

Some applications auto-decode, re-encode, trim punctuation, or treat plus signs and spaces differently. Messaging apps may also include trailing punctuation in the link. Parse the URL and inspect each component instead of judging only by the visible text.

Should redirect URLs be encoded inside query parameters?

Yes, but also validate them. Encoding preserves the redirect value as data; it does not prove the destination is allowed or safe.

Why should URL parsing use platform APIs?

Structured URL APIs understand components and reduce string-concatenation mistakes. Manual concatenation is where double encoding and broken separators usually enter.