HTML URL Encode

🔗 What is URL Encoding?

URL encoding converts characters into a format that can be transmitted over the Internet. URLs can only be sent using ASCII characters, so special characters must be encoded.


<!-- Original URL with spaces -->
<a href="my page.html">Link</a>

<!-- URL encoded (spaces become %20) -->
<a href="my%20page.html">Link</a>

Common URL Encodings

🔤

Space

Space character encoding

Original: " "
Encoded: %20 or +

❓

Question Mark

Query parameter separator

Original: ?
Encoded: %3F

🔗

Ampersand

Parameter separator

Original: &
Encoded: %26

📧

At Symbol

Email and username separator

Original: @
Encoded: %40

🔹 URL Encoding Table

Here are the most common characters and their URL encoded values:

Character	Description	Encoded
(space)	Space	%20
!	Exclamation mark	%21
"	Quotation mark	%22
#	Hash/Pound	%23
%	Percent	%25
&	Ampersand	%26

🔹 Practical Examples

See how URL encoding works in real scenarios:

🔸 Search Query with Spaces

<!-- Search for "web development" -->
<a href="search.php?q=web development">Search</a>

<!-- Properly encoded -->
<a href="search.php?q=web%20development">Search</a>

🔸 Email Link

<!-- Email with subject containing spaces -->
<a href="mailto:[email protected]?subject=Hello World">Email</a>

<!-- Properly encoded -->
<a href="mailto:[email protected]?subject=Hello%20World">Email</a>

🔸 Form Data

<!-- Form with special characters -->
<form action="process.php" method="get">
    <input type="text" name="user_name" value="John & Jane">
    <input type="submit" value="Submit">
</form>

<!-- Results in: process.php?user_name=John%20%26%20Jane -->

🔹 JavaScript URL Encoding

Use JavaScript functions to encode URLs dynamically:

<script>
// Encode a complete URL
var url = "https://example.com/search?q=hello world";
var encoded = encodeURI(url);
console.log(encoded); // https://example.com/search?q=hello%20world

// Encode URL components
var query = "hello & goodbye";
var encodedQuery = encodeURIComponent(query);
console.log(encodedQuery); // hello%20%26%20goodbye

// Decode URL
var decoded = decodeURIComponent("hello%20world");
console.log(decoded); // hello world
</script>