A html space is showing as %2520 instead of %20

URL encoding: a primer

URL encoding is a necessary step in managing spaces in URLs. The proper encoding for a space character is %20. However, a second, unintended encoding will turn % into %25, leading to %2520 - an incorrectly double-encoded space.

While dealing with paths, remind yourself of the context: use backslashes (\) for local file paths, particularly on Windows systems, but adhere to forward slashes (/) for URL paths. Local files should be pointed at with the file:/// prefix when in a URL context.

Path integrity and proper encoding

Formatting local file paths

Incorporating local file paths in HTML requires the file:/// protocol. Encode spaces into %20 and stick to using forward slashes, even in Windows file paths:

<!-- "Windows path" decoded for HTML -->
<img src="file:///C:/path%20to/images/picture.png" alt="Selfie with CSS" />


Don't get tripped by the local file system's backslashes and URL's forward slashes.

Single-handed with double encoding

Keep an eye out for functions or libraries that automatically encode URLs. Combining these with manual encoding efforts can lead to double trouble. Ensure only once encoding takes place with tools or approaches such as regular expressions:

let path = "path to/resource";
let encodedPath = path.replace(/\s/g, '%20'); // Say no to double agents


Troubleshooting and guiding principles

Dodging double trouble

Scrutinize your own code and configurations to ensure you aren't applying something akin to encodeURIComponent more than once accidentally.

Maintain vigilance on Ajax requests or other dynamic inputs where values could slip through and get encoded more than once. Some frameworks or APIs are helpful enough to do some heavy lifting for you and handle encoding.

Framework quirks

Check your framework's middleware or URL handling components that might be causing unsolicited double encodings.

When dealing with Ajax or fetching resources, be aware of how data might be processed. Parameters should traverse these processes without extra encoding steps.

Smooth handling of encoding for file paths

Embrace the file:/// protocol

Preface local machine paths with file:/// (three slashes) when pointing at local files in your HTML:

<!-- file:/// protocol in play -->
<a href="file:///C:/path/to%20file/document.pdf">Open Document</a>


Decoding dilemmas in file paths

Ensure to decode any file paths with %2520 back to %20 before usage. Malformed paths can lead to broken promises, or worse, broken links!

Spaces: the final frontier in local paths

Spaces in local file paths should echo %20 and not take the form of plus signs (+). Browsers gracefully handle paths with encoded spaces when opening local files, but a clog in the machine could cause potential issues:

<!-- Spaces in file paths, correctly handled -->
<img src="file:///path/to/image%20name.png" alt="Local Image" />
