Web

When to Use + vs %20 in URL Space Encoding

Learn when to encode spaces as + versus %20 in URLs. Understand the differences between these encoding methods and their appropriate usage in different URL components.

1 answer• 1 view

When should spaces be encoded as plus (+) versus %20 in URLs? What is the difference between these two encoding methods and when should each be used?

URL encoding requires careful consideration when handling spaces, with %20 being the standard percent-encoding for URI components while + is specifically used in form data encoded as application/x-www-form-urlencoded. The difference between these methods lies in their purpose and standards compliance, with %20 mandated by RFC 3986 for URL paths and fragments, while + is permitted by RFC 1866 for form query strings where browsers decode it as a space. Understanding when to use each encoding method depends on the URL component being encoded and the context of how the URL will be processed.

Contents

Understanding URL Space Encoding: %20 vs + Explained

URL encoding, also known as percent-encoding, is a method for representing special characters in URLs that wouldn’t otherwise be allowed. When dealing with spaces in URLs, developers have two primary options: encoding them as %20 or as a plus sign (+). This distinction isn’t arbitrary—it stems from different standards and use cases in web development.

The fundamental difference between these encoding methods lies in their purpose and historical context. The %20 encoding is the standard percent-encoding for URI components as defined by RFC standards, representing a literal space character. When a browser or server encounters %20 in a URL, it’s interpreted as an actual space character in the original text.

On the other hand, the plus sign (+) encoding is specific to form data and has a different semantic meaning. While it appears to represent a space, it was originally designed as a way to encode space characters in application/x-www-form-urlencoded content, which is how HTML form data is typically submitted. The key distinction is that + is only appropriate in specific contexts—primarily query string parameters from form submissions.

From a technical perspective, %20 is the “pure” URL encoding method that works consistently across all URL components, including paths, query parameters, and fragments. The + sign, while functionally similar in many cases, is essentially a “shortcut” that became popular due to its brevity and the early limitations of URL encoding in web browsers.

The Technical Standards: RFC 3986 and RFC 1866

The difference between %20 and + encoding isn’t just a matter of preference—it’s governed by formal internet standards that define how URLs should be constructed and interpreted. Understanding these standards provides the foundation for making informed decisions about when to use each encoding method.

RFC 3986, titled “Uniform Resource Identifier (URI): Generic Syntax,” is the current standard that governs URI construction. This document clearly states that spaces should be encoded as %20 when they appear in the path, query, or fragment components of a URI. The RFC establishes that percent-encoding is the proper way to represent any character that isn’t allowed in a URI, with %20 being the specific encoding for the space character.

However, the story becomes more complex when we look at RFC 1866, which defined HTML 2.0. This specification introduced the application/x-www-form-urlencoded content type for form submissions. In this context, the standard allows for spaces to be encoded as plus signs (+) as a shorthand notation. This convention was adopted because it reduced the length of URLs and was computationally simpler to handle in the early days of web development.

The key insight is that these two standards address different aspects of web technology:

  • RFC 3986 governs the structure of URIs themselves
  • RFC 1866 governs how form data is encoded when submitted

This distinction explains why + encoding works in query strings—it’s because browsers and servers have historically treated query parameters as if they were form data, even when they weren’t actually submitted through a form. However, this is more of a practical implementation detail than a formal standard.

Modern web technologies continue to respect these distinctions. When you’re constructing a URL programmatically or dealing with URL paths, fragments, or non-form query parameters, %20 is the correct encoding. Only when you’re specifically dealing with form data encoded as application/x-www-form-urlencoded should you consider using +.

According to the official Google Maps URL encoding documentation, “URL encoding replaces unsafe ASCII characters with a ‘%’ followed by two hexadecimal digits. For example, spaces are encoded as %20.” This reinforces that %20 is the standard approach for general URL construction.

When to Use %20 in Different URL Components

The decision between %20 and + encoding depends significantly on which part of the URL you’re working with. Different URL components have different rules and expectations regarding space encoding, and understanding these distinctions is crucial for creating properly formatted URLs.

URL Paths and Directory Structures

In URL paths, %20 encoding is not just recommended—it’s required. Paths represent the hierarchical structure of resources on a web server, and spaces in paths should always be encoded as %20. This is because the path component is governed strictly by URI standards (RFC 3986), which mandate percent-encoding for special characters.

For example, consider a file named “my document.html” in a directory structure. The correct URL would be:

https://example.com/documents/my%20document.html

Using a plus sign here would create an invalid URL that servers might interpret incorrectly:

https://example.com/documents/my+document.html // Incorrect in path

Most web servers will automatically convert + back to spaces when serving files, but this behavior isn’t guaranteed across all server implementations. Using %20 ensures maximum compatibility and follows the official URI standard.

URL Fragments

URL fragments (the part after the # symbol) should also use %20 encoding for spaces. Fragments are client-side identifiers that don’t get sent to the server, but they still need to follow URI standards to ensure proper interpretation by browsers and other clients.

For example:

https://example.com/page#section%20with%20spaces

Using + in fragments is technically allowed in some browsers, but it’s not standardized and can lead to inconsistent behavior across different user agents.

Query Parameters (Non-Form Data)

Query parameters represent a more nuanced case. While both %20 and + are technically valid in query strings, %20 is generally preferred for maximum compatibility. This is especially true when query parameters aren’t actually coming from form data.

For instance, consider a search URL where the search term is programmatically constructed:

https://example.com/search?q=my%20search%20terms

This format is unambiguous and will be interpreted correctly by all browsers and server-side scripts. While using plus signs would also work in most cases:

https://example.com/search?q=my+search+terms

The %20 version is more explicit about its encoding and avoids potential confusion with form data encoding.

According to the Sistrix SEO technical guide, “It is best practice to use %20 for spaces in URLs to avoid duplicate content issues.” This recommendation applies particularly to SEO-sensitive applications where URL consistency is important.

When to Use + in Form Data Encoding

While %20 is the standard encoding for most URL components, the plus sign (+) has a specific and important role in form data encoding. Understanding when and why to use + requires looking at how HTML forms have traditionally worked and how modern web technologies continue this practice.

The Application/x-www-form-urlencoded Content Type

HTML forms typically submit their data using the application/x-www-form-urlencoded content type. This format was designed to be simple and efficient, with specific rules for encoding special characters. In this context, spaces are encoded as plus signs (+) rather than %20.

This convention originated from early web development when bandwidth and processing power were more constrained. Using a single character (+) instead of three (%20) reduced the size of form submissions and simplified the encoding/decoding process on both client and server sides.

For example, consider a simple form with a text field:

html
<form action="/search" method="get">
 <input type="text" name="q" value="search terms">
 <button type="submit">Search</button>
</form>

When submitted, this form generates the following URL:

/search?q=search+terms

Notice how the spaces in the form input value have been converted to plus signs in the query string. This behavior is intentional and expected for form data encoded in this way.

Browser Behavior with + Encoding

Modern browsers continue to follow this convention faithfully. When a browser encounters a form with method=“get”, it automatically:

  1. Takes the form values
  2. Encodes spaces as plus signs
  3. Constructs the query string with these encoded values
  4. Navigates to the resulting URL

This behavior is deeply ingrained in web browser functionality and isn’t likely to change due to backward compatibility concerns.

Server-Side Decoding of + Signs

On the server side, web applications typically reverse this encoding process. Most server-side frameworks and programming languages automatically convert plus signs back to spaces when parsing query parameters from application/x-www-form-urlencoded data.

For example, in PHP, accessing $_GET['q'] after the form submission above would yield “search terms” (with spaces restored). Similarly, in Python using Flask, request.args.get('q') would return the same result. This automatic decoding is why developers often don’t need to worry about the distinction between + and %20 in query parameters—they’re functionally equivalent in the context of form data.

When Not to Use + in Form Data

Despite its appropriateness in form submissions, there are specific cases where even in form contexts, %20 might be preferred:

  1. API Endpoints: If your form is submitting to an API endpoint that expects standard URL encoding rather than form-specific encoding, using %20 is more appropriate.

  2. JavaScript APIs: When using JavaScript APIs like URLSearchParams, the standard behavior is to encode spaces as %20, not +.

  3. Mixed Data Sources: If your application might receive URL-encoded data from sources other than HTML forms (e.g., from JavaScript APIs or other applications), using %20 ensures consistency.

According to a Stack Overflow discussion with over 500 upvotes, “The + encoding is specific to the application/x-www-form-urlencoded content type, which is what HTML forms use by default. In all other contexts, %20 should be used.”

Programming Language Differences in Space Encoding

Different programming languages have evolved different approaches to URL encoding, particularly when it comes to handling spaces. Understanding these differences is crucial for developers who work across multiple languages or frameworks, as inconsistent encoding can lead to bugs and compatibility issues.

JavaScript: encodeURI vs encodeURIComponent

JavaScript provides two main functions for URL encoding, each with different behaviors regarding spaces:

  1. encodeURI(): This function encodes spaces as %20. It’s designed for encoding entire URLs and is less aggressive in its encoding, preserving characters that are allowed in URLs.

  2. encodeURIComponent(): This function also encodes spaces as %20, but it’s more aggressive in its encoding. It’s designed for encoding individual URI components like query parameters or path segments.

Interestingly, JavaScript doesn’t have a built-in function that encodes spaces as + by default. This is because JavaScript follows the URI standards (RFC 3986) which mandate %20 for space encoding. However, when working with form data, JavaScript developers often need to manually implement + encoding.

According to a dev.to article, “The key difference between these methods is that encodeURI is for encoding an entire URI, while encodeURIComponent is for encoding a component of a URI. Both encode spaces as %20, which is the correct standard for URI components.”

Python: urllib.parse Module

Python’s urllib.parse module provides comprehensive URL encoding functionality:

  1. quote(): Encodes spaces as %20 by default. This function is suitable for encoding URL paths and components.

  2. quote_plus(): Encodes spaces as + by default. This function is specifically designed for form data encoded as application/x-www-form-urlencoded.

The Python standard library thus provides both encoding methods, making it easy for developers to choose the appropriate one based on their context:

python
from urllib.parse import quote, quote_plus

path_component = "my document.html"
encoded_path = quote(path_component) # Results in "my%20document.html"

form_value = "search terms"
encoded_form = quote_plus(form_value) # Results in "search+terms"

PHP: urlencode vs rawurlencode

PHP offers similar distinctions in its URL encoding functions:

  1. urlencode(): Encodes spaces as + by default. This function is designed for form data and follows the application/x-www-form-urlencoded standard.

  2. rawurlencode(): Encodes spaces as %20 by default. This function provides “raw” URL encoding that follows RFC 3986 more strictly.

This difference in PHP is particularly important because many PHP applications handle query parameters, and using the wrong function can lead to encoding inconsistencies:

php
$form_value = "search terms";
$form_encoded = urlencode($form_value); // Results in "search+terms"

$path_component = "my document.html";
$path_encoded = rawurlencode($path_component); // Results in "my%20document.html"

Best Practices and Compatibility Considerations

When implementing URL encoding in web applications, there are several best practices and compatibility considerations that can help ensure robust functionality across different browsers, servers, and use cases. These guidelines help developers avoid common pitfalls and create more reliable web applications.

Default to %20 for Maximum Compatibility

In most cases, %20 encoding should be your default choice for spaces in URLs. This approach ensures maximum compatibility across different systems and follows the official URI standards (RFC 3986). While + encoding works in many contexts, it’s specific to form data and can lead to inconsistencies in certain scenarios.

For example, consider a URL that might be shared through different channels—email, social media, or direct copying. Using %20 ensures that the URL will be interpreted correctly regardless of how it’s processed:

javascript
// JavaScript example - using encodeURIComponent for general URL components
const searchTerm = "advanced search terms";
const encodedSearch = encodeURIComponent(searchTerm); // "advanced%20search%20terms"

This approach works consistently across all URL components and doesn’t rely on context-specific decoding behavior.

Handle Form Data Appropriately

When dealing specifically with form data encoded as application/x-www-form-urlencoded, using + encoding is appropriate. This follows the HTML standard (RFC 1866) and ensures compatibility with how browsers and servers expect form data to be formatted.

However, even in form contexts, there are edge cases to consider:

  1. Multi-part forms: For forms that include file uploads (using enctype=“multipart/form-data”), space encoding follows different rules entirely, and neither %20 nor + is the standard approach.

  2. AJAX requests: When submitting form data via AJAX, you may need to manually format the data according to the content type, which could affect how spaces are encoded.

  3. API endpoints: If your form submits to an API endpoint that expects standard URL encoding rather than form-specific encoding, using %20 might be more appropriate.

Consider SEO Implications

For SEO purposes, URL consistency is crucial. Using %20 encoding consistently across your site helps avoid duplicate content issues that can arise when the same content is accessible through multiple URL variants.

According to the Sistrix SEO guide, “Using %20 for spaces in URLs helps prevent search engines from treating URLs with spaces as different from URLs with %20, which can lead to duplicate content issues.”

Additionally, URLs with %20 encoding are generally more readable to humans and search engine crawlers, as the %20 sequence is clearly an encoding artifact rather than part of the actual content.

Browser and Server Compatibility

Different browsers and servers have varying levels of support for + and %20 encoding in different URL contexts. While modern browsers generally handle both correctly, there can be edge cases, particularly:

  1. Older browsers: Some legacy browsers might mishandle + in URL paths or fragments.

  2. Server configurations: Different web servers (Apache, Nginx, IIS) might have different default behaviors for handling + and %20.

  3. Reverse proxies: CDN and reverse proxy configurations might affect how encoded spaces are interpreted.

To ensure maximum compatibility, it’s generally safest to:

  • Use %20 in all URL components except when specifically dealing with form data
  • Test your URLs across different browsers and server environments
  • Be cautious when accepting user input that might affect URL construction

Sources

  1. Understanding URL Space Encoding — Technical explanation of space encoding differences: https://dev.to/lico/understanding-how-spaces-are-encoded-20-with-encodeuri-vs-with-url-2d6c
  2. W3Schools URL Encoding Reference — Comprehensive guide on URL encoding standards: https://www.w3schools.com/tags/ref_urlencode.ASP
  3. Stack Overflow: Space Encoding Consensus — Community recommendations on when to use each encoding method: https://stackoverflow.com/questions/2678551/when-should-space-be-encoded-to-plus-or-20
  4. Sistrix SEO Guide — SEO implications of URL encoding and duplicate content issues: https://www.sistrix.com/ask-sistrix/technical-seo/site-structure/do-i-have-to-convert-the-spaces-in-urls
  5. CleanFormatter URL Encoding Guide — Detailed explanation of URL encoding with focus on spaces: https://cleanformatter.com/blog/how-url-encoding-works-percent-codes-spaces-query-parameters-guide
  6. Stack Overflow: RFC Standards Discussion — Technical explanation of RFC standards governing URL encoding: https://stackoverflow.com/questions/1634271/url-encoding-the-space-character-or-20
  7. Google Maps URL Encoding Documentation — Official guidance on URL encoding standards: https://developers.google.com/maps/url-encoding
  8. W3C Web Share Target Discussion — W3C specification details about browser decoding behavior: https://github.com/w3c/web-share-target/issues/59

Conclusion

URL encoding of spaces requires understanding the difference between %20 and + encoding methods and knowing when each is appropriate. The %20 encoding is the standard percent-encoding method mandated by RFC 3986 for URI components, including paths, fragments, and non-form query parameters. In contrast, the + encoding is specific to form data encoded as application/x-www-form-urlencoded, as permitted by RFC 1866.

For most web development scenarios, %20 encoding should be your default choice, as it provides maximum compatibility across different URL components and systems. Use + encoding only when specifically dealing with form data that will be submitted using the application/x-www-form-urlencoded content type. By following these guidelines and understanding the technical standards behind URL encoding, developers can create more robust, compatible, and standards-compliant web applications.

Authors
NeuroAnswers
Author
Verified by moderation
NeuroAnswers
Author
When to Use + vs %20 in URL Space Encoding