HTML URL Encoding

URL encoding converts characters into a format that can be safely transmitted over the internet. It ensures that all characters in a URL are valid and can be interpreted correctly by web servers.

1. What is URL Encoding?

URLs can only be sent over the internet using ASCII characters. URL encoding replaces unsafe ASCII characters with a % followed by two hexadecimal digits. This process ensures special characters do not interfere with URL structure.

Why URL Encoding is Needed:

• Special Characters: Characters like spaces, &, %, and ? have special meanings in URLs. URL encoding ensures they are interpreted correctly.
• Non-ASCII Characters: Characters outside the ASCII set (like Chinese, Arabic, or emojis) need to be encoded to ensure they are transmitted correctly.

2. Common Characters and Their Encoded Versions

3. How URL Encoding Works

When a browser sends a URL to a server, it encodes the URL automatically. However, when building URLs in your code (like form submissions or query strings), you may need to URL encode them manually.

Example:

• Original URL: https://example.com/search?query=hello world
• Encoded URL: https://example.com/search?query=hello%20world

Encoding in HTML:

<a href="https://example.com/search?query=hello%20world">Search</a>

4. URL Encoding in Form Submissions

When form data is sent via the URL (GET method), the data is encoded.

Example Form:

<form action="/submit" method="get">
  <input type="text" name="name" value="John Doe">
  <input type="submit">
</form>

Submitted URL:

/submit?name=John%20Doe

. Tools for URL Encoding

Most programming languages and frameworks have built-in functions for URL encoding. For instance:

• JavaScript: encodeURIComponent()
• Python: urllib.parse.quote()
• PHP: urlencode()

Example in JavaScript:

let url = "https://example.com/search?query=" + encodeURIComponent("hello world");
console.log(url); // Output: https://example.com/search?query=hello%20world

6. Decoding URLs

URL decoding converts encoded URLs back to their original form.

In JavaScript:

let encodedUrl = "hello%20world";
let decodedUrl = decodeURIComponent(encodedUrl);
console.log(decodedUrl); // Output: hello world

Conclusion

URL encoding is essential for ensuring safe transmission of special and non-ASCII characters in URLs. By encoding URLs properly, you prevent errors and ensure that data is transmitted correctly across the web.