HTML URL Encode
In this page:
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?
<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 +)
<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
<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
<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
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="photo">
</form>- 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 the default form encoding type on file upload forms, which prevents file data from transferring.
- 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.
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: