← Back to HTML Course | Chapter 4: Semantics & Entities | Lesson 7 of 10

HTML URL Encode

Imagine writing a letter to a friend and sending it through the mail. But instead of writing a standard street address on the envelope, you write a message with special characters and symbols. The post office sorting machines might get confused and deliver your letter to the wrong house. URLs can also get confused by special characters. Web addresses can only contain standard ASCII characters. If a URL contains spaces, accents, or symbols, the browser must convert them into safe codes using percentages. This conversion process is called 'URL encoding'. It converts spaces and unsafe symbols into secure, standardized codes so browsers can find your page safely.

In this page:

  1. What is URL Encoding?
  2. Encoding Spaces (%20 or +)
  3. Encoding Reserved Query Characters
  4. Handling Non-ASCII Characters
  5. Form Data Encoding Types

What is URL Encoding?

URL encoding converts unsafe or special characters in a web address into a safe format that can be transmitted over the internet, replacing non-ASCII 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: What is URL Encoding?

markup 
<a href="https://example.com/search?q=hello%20world">Search link</a>

Encoding Spaces (%20 or +)

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 Spaces (%20 or +)

markup 
<a href="page%20name.html">Link with encoded space</a>

Encoding Reserved Query Characters

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 Reserved Query Characters

markup 
<a href="https://example.com/search?q=cats%26dogs">Encoded ampersand</a>

Handling Non-ASCII 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: Handling Non-ASCII Characters

markup 
<a href="https://example.com/caf%C3%A9">Encoded café</a>

Form Data Encoding Types

When a user submits an HTML form, the browser packages the input data and encodes it automatically. By default, forms use the 'application/x-www-form-urlencoded' format to package query fields as name-value pairs.

Note: The default form encoding type is perfect for standard text fields, but you must use 'multipart/form-data' when uploading files.
Warning: Failing to specify the correct encoding type on a file upload form will cause your file transfers to fail.

Example: Form Data Encoding Types

markup 
<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="photo">
</form>
Live Example
Related Topics

HTML URL Encode Reference · HTML Charsets · HTML vs XHTML · HTML Emojis

{# 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 the default form encoding type on file upload forms, which prevents file data from transferring.
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.
  • Always use the correct form encoding type (like multipart/form-data for file uploads) to ensure your data transmits successfully.
Browser Support

Standard URL encoding and decoding protocols are supported natively by all web browsers.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson HTML Charsets Next Lesson → HTML vs XHTML

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.