HTML URL Encode Reference
In this page:
URL Encoding Syntax
URL encoding converts unsafe or non-ASCII characters in a web address into a safe format, replacing special characters with a '%' symbol followed by two hexadecimal digits.
Note: URLs can only contain letters, numbers, and a few safe symbols like hyphens and slashes.
Warning: Unencoded spaces or special symbols inside your web link paths will cause the browser to fail loading the page.
Example: URL Encoding Syntax
<a href="https://example.com/page%20name">Encoded link</a>Encoding Space Characters (%20 vs +)
Spaces are the most common unsafe characters in URLs. Browsers convert spaces inside standard web link paths into the hexadecimal code %20, while spaces in form query parameters are often converted into a plus symbol (+).
Note: Avoid using spaces when naming your web files; use hyphens instead to keep your URLs clean.
Warning: Ensure your file links do not mix %20 and plus symbols incorrectly, as it can cause loading issues.
Example: Encoding Space Characters (%20 vs +)
<a href="my%20file.html">Path encoded space</a>
<a href="/search?q=hello+world">Query encoded space</a>Encoding Special Reserved Marks
Characters like ?, &, and = are reserved in URLs to separate query parameters. If you need to include these symbols as actual data inside your query values, you must encode them to prevent the browser from misreading them as parameters.
Note: Encoders convert reserved symbols (like & to %26 and = to %3D) to keep your parameters structured.
Warning: Failing to encode query data can break your parameters and cause server errors.
Example: Encoding Special Reserved Marks
<a href="https://example.com/search?q=cats%26dogs">Encoded ampersand</a>Encoding Unicode Characters
Web addresses cannot contain non-ASCII characters like accents, Cyrillic letters, or emojis. If you include these characters in your links, the browser will automatically convert them into secure, hexadecimal codes.
Note: Modern browsers hide URL encoding in the address bar to keep your links looking clean and readable.
Warning: If you copy and paste a URL containing special characters from the browser address bar, it will paste as a long, encoded string.
Example: Encoding Unicode Characters
<a href="https://example.com/caf%C3%A9">Encoded café</a>URL Encoding Reference Map
This reference map lists the standard percentage codes used to represent the most common unsafe and reserved characters in URLs.
Note: Keep this reference map handy when formatting query strings manually inside your links.
Warning: Ensure you write all percentage codes in uppercase letters, as some servers may fail to parse lowercase codes.
Example: URL Encoding Reference Map
<!-- Space: %20 | &: %26 | =: %3D | ?: %3F -->
<a href="https://example.com/search?q=cats%26dogs">Link using encoded symbols</a>- Leaving raw spaces inside your file paths and webpage link URLs.
- Failing to encode query data containing reserved characters like ampersands or equal signs.
- Using lowercase letters when writing percentage codes, which some older servers may fail to parse.
- URL encoding converts unsafe or non-ASCII characters in a web address into a safe format.
- Spaces are converted into '%20' inside file paths, and plus symbols (+) inside form queries.
- Reserved query characters (like & and =) must be encoded to prevent the browser from misreading them as parameters.
Standard URL encoding and decoding protocols are supported natively by all web browsers.
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: