URL encoding explained — what %20 means and how to fix broken links

Have you ever seen %20 in a URL and wondered what it means? Or pasted a URL into an email only to have it break? This guide explains URL encoding (also called percent-encoding) and how to handle it correctly.

What is URL encoding?

URLs can only contain a limited set of ASCII characters. Characters outside that set — spaces, accented letters, symbols like &, =, # — must be encoded before being placed in a URL.

URL encoding replaces unsafe characters with a % followed by the character's two-digit hexadecimal ASCII code. A space (ASCII 32 = 0x20) becomes %20. An ampersand becomes %26.

Common encoded characters

• Space → %20 (or + in form data)
• & → %26
• = → %3D
• ? → %3F
• # → %23
• / → %2F
• + → %2B
• @ → %40

encodeURI vs encodeURIComponent (for developers)

JavaScript provides two built-in functions for URL encoding:

• encodeURI(url) — Encodes a complete URL. Leaves structural characters (:, /, ?, #, &, =) unencoded because they have meaning in URL structure.
• encodeURIComponent(value) — Encodes a URL component (like a query parameter value). Encodes everything including &, =, ?, and /. Use this for individual values you embed in query strings.

Example: to build https://example.com/search?q=hello world&lang=en correctly:

const q = encodeURIComponent('hello world'); // → 'hello%20world'
const url = \`https://example.com/search?q=\${q}&lang=en\`;

Why URLs break — common mistakes

• Double encoding — Encoding a URL that was already encoded, turning %20 into %2520. Always decode first, then re-encode if needed.
• Not encoding query parameters — A parameter value containing & or = will break the query string if not encoded.
• Using + for spaces in path segments — + means space only in form-encoded query strings (application/x-www-form-urlencoded). In URL paths, use %20.
• Non-ASCII characters — Accented characters like é or Cyrillic must be UTF-8 encoded first, then percent-encoded.

How to encode and decode URLs in your browser

1. Open ToolBite's URL encoder & decoder.
2. Paste your URL or text into the input.
3. Click Encode to percent-encode special characters, or Decode to convert %xx sequences back to readable text.
4. Copy the result directly from the output box.

Everything runs locally in your browser — useful when debugging API endpoints that contain sensitive tokens you don't want to paste into third-party services.

Quick checklist

• Use encodeURIComponent() for query parameter values, not full URLs.
• Check for double-encoding if you see %25 in your URL (that's an encoded %).
• Spaces in paths should be %20, not +.
• Decode URLs before displaying them to users — no one wants to read caf%C3%A9.