← Back to HTML Course | Chapter 9: Reference & Advanced | Lesson 5 of 9

HTML URL Encode Reference

Imagine sending an overseas postcard. If you write your message using standard letters, the sorting machine reads them cleanly. But if you draw custom symbols or leave empty spaces, the machine might get confused and drop your postcard in the wrong bin. Web addresses have that exact limitation. URLs can only contain standard ASCII characters. If your link paths contain spaces, accents, or reserved symbols, the browser must convert them into safe codes using percentages. This reference guide lists those standard percentage codes so you can format and build web links that load reliably every single time.

In this page:

  1. URL Encoding Syntax
  2. Encoding Space Characters (%20 vs +)
  3. Encoding Special Reserved Marks
  4. Encoding Unicode Characters
  5. URL Encoding Reference Map

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

markup 
<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 +)

markup 
<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

markup 
<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

markup 
<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

markup 
<!-- Space: %20  |  &: %26  |  =: %3D  |  ?: %3F -->
<a href="https://example.com/search?q=cats%26dogs">Link using encoded symbols</a>
Live Example
Related Topics

HTML URL Encode · HTML Audio/Video Reference · HTML Events · HTML Language Codes

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Leaving raw spaces inside your file paths and webpage link URLs.
  2. Failing to encode query data containing reserved characters like ampersands or equal signs.
  3. Using lowercase letters when writing percentage codes, which some older servers may fail to parse.
Chapter Summary
  • 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.
Browser Support

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:

← Previous Lesson HTML Events Next Lesson → HTML Language Codes

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.