HTML URL Encode


URL Encoding is the process of converting characters into a format that can be transmitted over the Internet. URLs can only be sent over the Internet using the ASCII character set, so URL encoding converts non-ASCII or unsafe characters into a format using % followed by two hexadecimal digits.


🔹 Why URL Encode?

  • URLs cannot contain spaces or certain special characters.

  • Encoding converts reserved characters into a valid format.

  • Ensures URLs are transmitted correctly and safely.


🔹 Characters that Need Encoding

  • Space ( ) → %20 or +

  • <%3C

  • >%3E

  • #%23

  • %%25

  • {%7B

  • }%7D

  • |%7C

  • \%5C

  • ^%5E

  • ~%7E

  • [%5B

  • ]%5D

  • `%60


🔹 URL Encoding Example

Original URL with unsafe characters:

https://example.com/search?query=HTML URL Encode & test

URL Encoded:

https://example.com/search?query=HTML%20URL%20Encode%20%26%20test

💻 Example in JavaScript

const originalUrl = "https://example.com/search?query=HTML URL Encode & test";
const encodedUrl = encodeURIComponent("HTML URL Encode & test");
console.log(encodedUrl);
// Output: HTML%20URL%20Encode%20%26%20test

const fullUrl = `https://example.com/search?query=${encodedUrl}`;
console.log(fullUrl);
// Output: https://example.com/search?query=HTML%20URL%20Encode%20%26%20test

🔹 URL Encoding in HTML Forms

HTML forms automatically encode form data when using GET or POST method.

Example:

<form action="/search" method="get">
  <input type="text" name="query" />
  <input type="submit" value="Search" />
</form>

If user enters HTML URL Encode & test, the browser encodes it before sending.


Practice Questions

Q1. Explain why spaces are encoded in URLs.

Q2. Encode the URL parameter name=John Doe & Sons.

Q3. Decode the encoded URL string %3Cdiv%3EHello%3C%2Fdiv%3E.

Q4. Write JavaScript to encode a query string for a URL.

Q5. Create an HTML form that sends URL-encoded data using GET method.

Q6. Show examples of reserved characters in URLs that must be encoded.

Q7. Explain difference between encodeURI and encodeURIComponent in JavaScript.

Q8. Describe how browsers handle URL encoding in form submission.

Q9. Write a PHP snippet to decode URL encoded strings.

Q10. List characters that do NOT need encoding in URLs.


Go Back Top