HTML URL Encoding Explained
HTML URL Encoding Explained
Focus keyword: URL encoding — essential for building working links, forms, and query strings that contain spaces, special characters, or non-English text.
1. What Is URL Encoding?
URLs can only contain a limited set of characters from the ASCII character set. URL encoding (also called percent-encoding) converts unsafe or reserved characters into a % followed by two hexadecimal digits, so URLs remain valid and unambiguous.
2. Common Encoded Characters
| Character | Encoded |
|---|---|
| Space | %20 (or + in query strings) |
| & | %26 |
| ? | %3F |
| # | %23 |
| / | %2F |
3. Why It Matters
Reserved characters like & and ? already have special meaning in URLs (separating query parameters, starting a query string). If left un-encoded inside a value, they can break the link or corrupt form data — a common bug in real-world web development and API integration.
4. Encoding in Query Strings
A typical query string looks like ?search=web+development&category=html. Values with spaces or special characters must be encoded before being appended to a URL.
5. Encoding with JavaScript
Modern JavaScript provides built-in functions: encodeURIComponent() for encoding individual query values, and encodeURI() for encoding a full URL while preserving its structural characters (like :, /, ?).
6. Practical Use Cases
- Search boxes that build a URL from user input
- Sharing links containing special characters (e.g., emojis, non-English text)
- API requests with dynamic query parameters
Press Run to execute.
Press Run to execute.
Write JavaScript that takes a user search string 'best HTML & CSS courses 2026' and builds a correctly encoded search URL: https://example.com/search?q=<encoded-value>. Log the final URL to the console.
Press Run to execute.
Show expected output
The console logs a URL where spaces and the & character are properly percent-encoded using encodeURIComponent.This is a self-check — compare your result with the expected output above.
Was this page helpful?