When you type a web address (URL) into your browser, it can only contain specific characters — letters, numbers, and a few symbols like -, _, ., and ~.
But sometimes, you need to include special characters (like spaces, @, #, ?, &, etc.) in a URL. Since these can break the link or cause confusion, browsers convert them into a safe format known as URL Encoding (or Percent Encoding).
URLs can’t directly contain spaces or special characters, as they have special meanings in HTTP. Encoding ensures data is transmitted safely across browsers and servers.
| Problem | Without Encoding | With Encoding |
|---|---|---|
| Spaces break links | my page.html | my%20page.html |
| Special symbols cause errors | name=John&age=25 | name=John%26age%3D25 |
| Unicode not supported | नमस्ते.html | %E0%A4%A8%E0%A4%AE%E0%A4%B8%E0%A5%8D%E0%A4%A4%E0%A5%87.html |
Encoding makes URLs browser-safe, SEO-friendly, and readable by web servers worldwide.
How URL Encoding Works
- Every character in a URL is represented by a code point (numeric value).
- Safe characters (A–Z, a–z, 0–9,
-,_,.,~) remain unchanged. - Unsafe characters are replaced with
%followed by their hexadecimal ASCII value.
Example:
- Space = %20
- ? = %3F
- & = %26
- = = %3D
- # = %23
So,
https://example.com/search?name=John Doe
becomes
https://example.com/search?name=John%20Doe
Common URL Encoded Characters
| Character | Encoded Value | Character | Encoded Value |
|---|---|---|---|
| Space | %20 | @ | %40 |
| ! | %21 | # | %23 |
| $ | %24 | % | %25 |
| & | %26 | + | %2B |
| , | %2C | / | %2F |
| : | %3A | ; | %3B |
| < | %3C | > | %3E |
| ? | %3F | = | %3D |
Example of URL Encoding in HTML Links
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML URL Encoding with examples, meaning, and how to encode special characters safely for web development.">
<meta name="keywords" content="HTML URL encode, URL encoding tutorial, percent encoding, encode special characters, HTML web tutorial">
<meta name="author" content="Dharmesh Kundariya">
<title>HTML URL Encoding Example</title>
</head>
<body>
<h1>HTML URL Encoding Example</h1>
<p>Without encoding:</p>
<a href="https://example.com/search?query=Hello World">Broken Link</a>
<p>With encoding:</p>
<a href="https://example.com/search?query=Hello%20World">Correct Link</a>
</body>
</html>