URL Encoding Explained with Real Examples

Introduction

Have you ever copied a link and noticed strange characters like %20 or %3D scattered through it? Or tried to pass a search term with a space or an ampersand into a URL, only to have it break? That's URL encoding at work — or, in the broken case, URL encoding that didn't happen when it should have. It's one of those web fundamentals that quietly runs behind almost every link, form submission, and API request on the internet, yet very few people outside of software development actually understand how it works or why it exists. This guide breaks down exactly what URL encoding is, why it's necessary, and walks through real, practical examples so you can recognize it, use it correctly, and troubleshoot it when something goes wrong.

---

What Is URL Encoding?

URL encoding, also called percent-encoding, is a method for representing characters in a URL that aren't allowed to appear there in their original form. URLs can only safely contain a limited set of characters: letters, numbers, and a handful of special characters like -, _, ., and ~. Everything else — spaces, symbols like & or =, and characters from non-English alphabets — has to be converted into a special format before it can be safely included in a URL. That special format replaces the character with a percent sign (%) followed by its two-digit hexadecimal code. For example, a space becomes %20, and an ampersand becomes %26. This system exists because URLs are transmitted as plain text across many different systems (browsers, servers, proxies), and certain characters have special meaning within the structure of a URL itself. Without encoding, those characters would be misinterpreted, causing broken links or corrupted data.

---

Why It Matters

For developers: Passing user input, search queries, or file paths into a URL without proper encoding is one of the most common causes of broken links, failed API requests, and even security vulnerabilities. For digital marketers and SEO professionals: UTM parameters, tracking links, and campaign URLs often include characters that need encoding to function correctly across every platform and email client. For general users: Understanding URL encoding helps you recognize what's actually in a link before clicking it, and explains why some URLs look so cluttered with percent signs and strange characters. For content creators: Sharing links with special characters (accented letters, symbols, non-English text) in titles or slugs often requires encoding to display and function correctly everywhere.

A Practical Example

Say you want to search Google for the phrase "cats & dogs" directly through a URL. If you typed it in exactly as written, the ampersand (&) would be misinterpreted as a separator between different URL parameters, breaking the search query. Properly encoded, the URL would represent the phrase as cats%20%26%20dogs, ensuring the search engine receives the exact phrase you intended, including the ampersand as a literal character rather than a structural symbol.

---

Key Concepts

Reserved vs Unreserved Characters

URLs divide characters into two categories: * Unreserved characters — letters (A–Z, a–z), numbers (0–9), and a small set of symbols (-, _, ., ~) that never need encoding, since they have no special meaning in a URL's structure. * Reserved characters — symbols like /, ?, #, &, =, and : that have specific structural meaning within a URL (separating paths, queries, and parameters). These need encoding whenever they appear as literal data rather than serving their structural purpose.

Percent-Encoding Format

Every encoded character follows the same pattern: a percent sign followed by the character's hexadecimal ASCII (or UTF-8, for non-ASCII characters) value. For example: * A space becomes %20 * An ampersand (&) becomes %26 * An equals sign (=) becomes %3D * A forward slash (/) becomes %2F

The Difference Between + and %20 for Spaces

In query strings specifically (the part of a URL after the ?), spaces are sometimes represented with a plus sign (+) instead of %20, due to a historical convention from HTML form submissions. Both typically work in query strings, but %20 is the more universally correct choice, especially outside of query string contexts.

Encoding Non-English Characters

Characters from non-English alphabets, emoji, and other Unicode characters are encoded using their UTF-8 byte representation, which often results in multiple percent-encoded segments for a single character. For example, the character "é" becomes %C3%A9 in UTF-8 percent-encoding.

---

How It Works

How a Browser Encodes a URL

• When you type or submit a URL containing special characters, the browser or application identifies which characters fall outside the allowed unreserved set.

• Each of those characters is converted to its byte representation (using UTF-8 for non-ASCII characters).

• Each byte is represented as a percent sign followed by its two-digit hexadecimal value.

• The resulting encoded URL is transmitted to the server, which decodes it back into the original characters upon receipt.

How a Server Decodes a URL

• The server receives the incoming URL, including any percent-encoded sequences.

• It scans for the % character, treating the following two characters as a hexadecimal byte value.

• Those bytes are converted back into their original characters (or reassembled into a full Unicode character if using multi-byte UTF-8 encoding).

• The decoded value is passed to the application logic to be processed as intended.

---

Step-by-Step Guide

How to URL Encode a String

• Choose a URL encoding tool.

• Paste in the text or string you want to encode, including any spaces or special characters.

• Run the encoding process.

• Copy the resulting encoded string, which will now be safe to include directly in a URL.

How to URL Decode a String

• Choose a URL decoding tool.

• Paste in the percent-encoded string you want to decode.

• Run the decoding process.

• Review the original, human-readable text that was returned.

How to Encode a URL Parameter in Code (Conceptual Overview)

• Identify the specific value you need to insert into a URL (such as a search term or user input).

• Use your programming language's built-in encoding function (for example, encodeURIComponent() in JavaScript) rather than manually replacing characters.

• Insert the encoded value into the appropriate part of the URL, such as after a query parameter's equals sign.

• Test the resulting URL to confirm it behaves as expected when requested.

---

Real-World Examples

A marketer building a campaign tracking link: A UTM parameter containing spaces or special characters (like "Summer Sale & Clearance") needs proper encoding to avoid breaking the link when shared across email, social media, or ad platforms. A developer building a search feature: User-submitted search terms containing symbols, spaces, or non-English characters must be encoded before being appended to a URL for an API request, or the request will fail or return incorrect results. A content creator sharing a link with accented characters: A URL slug or query containing letters like "é" or "ñ" needs UTF-8 percent-encoding to display and function correctly across all browsers and platforms. An SEO professional auditing redirect URLs: Improperly encoded characters in redirect rules can cause broken links or duplicate content issues, making URL encoding knowledge directly relevant to technical SEO work. A support team troubleshooting a broken link: A customer-reported broken link often traces back to an unencoded special character (commonly an ampersand or space) breaking the URL's structure.

---

Benefits

* Ensures URLs function correctly across every browser, server, and platform * Prevents special characters from being misinterpreted as structural elements of a URL * Enables proper transmission of non-English characters, emoji, and symbols in web addresses * Reduces the risk of broken links, failed form submissions, and corrupted data * Supports secure and predictable handling of user-submitted data in web applications

---

Common Mistakes

* Manually replacing characters instead of using built-in encoding functions. This often misses edge cases and can introduce inconsistent or incorrect encoding. * Double-encoding a URL that's already encoded. This results in percent signs being encoded again (%2520 instead of %20), breaking the intended value. * Encoding an entire URL instead of just the parameter values. This can accidentally encode structural characters like / or ? that need to remain unencoded to preserve the URL's structure. * Assuming + and %20 are always interchangeable. While both often represent spaces in query strings, they aren't universally equivalent outside that specific context. * Forgetting to decode data on the receiving end. If a server or application doesn't properly decode incoming encoded data, it will process the raw percent-encoded string instead of the intended value. * Not encoding user input before inserting it into a URL. This is a common cause of broken links and, in more serious cases, can introduce security vulnerabilities.

---

Best Practices

* Always use your programming language's built-in encoding function (like encodeURIComponent() in JavaScript or urlencode() in PHP) rather than manually encoding characters. * Encode only the specific values being inserted into a URL, not the entire URL string, to avoid breaking its structural characters. * Test encoded URLs across multiple browsers and platforms, especially when sharing links via email or social media, where automatic re-encoding can sometimes occur. * Be mindful of double-encoding when working with URLs that may have already been encoded elsewhere in your application. * Use UTF-8 encoding consistently across your application to avoid character corruption with non-English text. * Document any custom encoding logic in your codebase clearly, since encoding bugs can be subtle and hard to trace.

---

Comparison

Common Characters and Their URL-Encoded Equivalents

URL Encoding vs Base64 Encoding

---

Frequently Asked Questions

1. What does %20 mean in a URL? It represents a space character. URLs can't contain literal spaces, so they're percent-encoded as %20 to remain valid. 2. Why do some URLs use + instead of %20 for spaces? This is a historical convention from HTML form submissions, where + represents a space specifically within query strings. Both are generally interpreted correctly, but %20 is the more universally correct choice. 3. Is URL encoding the same as encryption? No. URL encoding simply converts characters into a URL-safe format and is fully reversible by anyone; it provides no security or confidentiality, unlike encryption. 4. What happens if I don't encode special characters in a URL? The URL may break entirely, or reserved characters may be misinterpreted as structural elements, leading to incorrect parsing, failed requests, or corrupted data. 5. How do I encode a URL in JavaScript? Use the built-in encodeURIComponent() function for individual values, or encodeURI() when encoding an entire URL while preserving its structural characters. 6. Can URL encoding cause security issues? Improper handling of encoded or unencoded user input can contribute to certain web vulnerabilities, which is why using standard, well-tested encoding functions rather than custom logic is strongly recommended. 7. Why does my link look different after I paste it somewhere? Some platforms automatically re-encode or modify URLs when displaying or sharing them, which can sometimes result in double-encoding or altered characters. 8. What is percent-encoding used for besides URLs? It's also used in some email headers, certain data URIs, and other contexts where reserved or unsafe characters need a safe, text-based representation. 9. How do I decode a URL-encoded string? Use a URL decoding tool, or your programming language's built-in decoding function (such as decodeURIComponent() in JavaScript), to convert percent-encoded sequences back into their original characters. 10. Do all browsers handle URL encoding the same way? Modern browsers follow the same standardized encoding rules (defined by the URI specification), so encoding behaves consistently, though how a URL displays in the address bar can vary slightly between browsers. 11. Why do non-English characters produce multiple percent-encoded segments? Because those characters are encoded using their UTF-8 byte representation, and many non-ASCII characters require more than one byte to represent, resulting in multiple %XX segments for a single character.

---

Troubleshooting

My URL breaks when I share it in an email or message. Some platforms alter special characters automatically. Try re-encoding the URL before sharing, or use a link shortener to avoid formatting issues. I'm seeing %2520 instead of %20 in my URL. This indicates double-encoding — the URL was encoded twice. Decode it once to check whether it now displays correctly, and adjust your code to avoid encoding an already-encoded value. My search query with special characters isn't returning the expected results. Confirm the query parameter is properly encoded using your programming language's built-in encoding function, rather than manually inserted into the URL. My API request fails when the input contains an ampersand or equals sign. These are reserved characters used to separate query parameters. Make sure to encode any literal ampersands or equals signs within your parameter values before inserting them into the URL. Accented characters in my URL show up as strange symbols. This usually indicates a UTF-8 encoding issue. Ensure your application consistently encodes and decodes using UTF-8 throughout the request and response cycle. My encoded URL looks correct, but the server isn't decoding it properly. Check that your server-side framework or language is set to decode incoming URLs using UTF-8, and confirm there isn't custom logic interfering with the standard decoding process.

---

Related Tools

If you work with URLs and web data regularly, these free webgigo tools can help: * URL Encoder — Encode and decode text for safe use in URLs and query strings. * Base64 Encoder — Convert data to Base64 format for embedding in URLs, code, or emails. * QR Code Generator — Useful for encoding URLs (including properly encoded ones) into scannable codes. * JSON Formatter — Helpful when working with API responses that include URL-encoded query data.

---

Conclusion

URL encoding might look like technical clutter at first glance, but it's solving a genuinely important problem: making sure every character in a URL, no matter how unusual, can be transmitted safely and interpreted correctly by every browser and server it passes through. Understanding the difference between reserved and unreserved characters, using built-in encoding functions instead of manual replacements, and watching out for double-encoding will save you from some of the most common (and most confusing) bugs in web development and digital marketing alike. Ready to put this into practice? Try webgigo's free URL Encoder to encode or decode any string in seconds — no software downloads required.