HTML URL encoding converts non-ASCII characters, spaces, and reserved symbols into safe hexadecimal percent-encoded formats (%20, %26, %3D) so they can be transmitted safely over HTTP query strings and web URLs.
URLs can only contain a limited set of ASCII characters. Unsafe or reserved characters are converted into % followed by two hexadecimal digits:
<!-- Original Text with Spaces and Ampersand -->
Search: "HTML & CSS"
<!-- URL Encoded Representation -->
https://example.com/search?q=HTML%20%26%20CSS
Common URL encoding conversions:
): Encoded as %20 or +.&): Encoded as %26.=): Encoded as %3D.?): Encoded as %3F./): Encoded as %2F.flowchart LR
A["Raw Input ('HTML & CSS')"] --> B["JS encodeURIComponent()"]
B --> C["Percent Encoded String ('HTML%20%26%20CSS')"]
C --> D["Safe HTTP GET Query Request"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML URL Encoding Example</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>URL Encoder Tool</h2>
<div style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; max-width: 450px;">
<label for="raw-input" style="display: block; margin-bottom: 0.5rem;">Enter Text to Encode:</label>
<input type="text" id="raw-input" value="hello world & team" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #334155; margin-bottom: 1rem;">
<p>Encoded URL Output: <br><strong id="encoded-output" style="color: #38bdf8; word-break: break-all;"></strong></p>
</div>
<script>
const input = document.getElementById("raw-input");
const output = document.getElementById("encoded-output");
function updateEncoding() {
output.textContent = encodeURIComponent(input.value);
}
input.addEventListener("input", updateEncoding);
updateEncoding();
</script>
</body>
</html>
encodeURIComponent() in JavaScript: Always encode dynamic URL query parameter values in JS (const safeUrl = "/search?q=" + encodeURIComponent(query)).https://.+ and ampersands to %26 on submit.Encode the string "cats & dogs" manually or via JS into its percent-encoded URL equivalent (cats%20%26%20dogs)!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.