Back to Blog

URL Encoding Explained: How It Works and Why Developers Can’t Live Without It

Discover the critical role URL encoding plays in web security and data transmission.

Guilherme Salviano

I’m passionate about technology, and over the past few years, my ambition has been to create a software development company.

3 min read
Technology
URL Encoding Explained: How It Works and Why Developers Can’t Live Without It

What is URL Encoding?

URL encoding, also known as percent-encoding, is a mechanism used in web development to ensure that URLs (Uniform Resource Locators) are transmitted over the Internet in a safe and reliable manner. This process involves converting characters that are not permitted or have special meanings in URLs into a format that can be transmitted without ambiguity.

Why is URL Encoding Necessary?

URLs are designed to contain only a specific set of characters known as the ASCII character set. Characters outside this set, including spaces, punctuation marks, and non-ASCII characters, may either be misinterpreted by web servers or have special functions within the URL structure. For instance, characters like ?, &, and # serve as delimiters in URLs. To prevent confusion and ensure that URLs are interpreted correctly, these characters must be encoded.

How URL Encoding works?

URL encoding transforms unsafe or reserved characters into a format that is universally accepted in URLs. This is achieved by replacing each character with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII value. For example:

  • A space ( ) is encoded as %20.
  • An exclamation mark (!) becomes %21.
  • A hash (#) is represented as %23.

This encoding ensures that the URL remains intact during transmission and that all included data is accurately interpreted by web servers.

Characters in URL Encoding

CaracterNameEncode
Espace%20
!Exclamation%21
"Quotation%22
#Hashtag%23
$Dollar%24
%Percent%25
&Ampersand%26
'Apostrophe%27
(Left parenthesis%28
CaracterNameEncode
*Asterisk%2A
+Plus%2B
,Comma%2C
/Forward slash%2F
:Colon%3A
;Semicolon%3B
<Less-than%3C
=Equals%3D
>Greater-than%3E
CaracterNameEncode
@At%40
[Left square bracket%5B
\Backslash%5C
]Right square bracket%5D
^Caret%5E
`Grave accent%60
{Left curly brace%7B
|Vertical bar%7C
}Right curly brace%7D
~Tilde%7E