HTML URL Encode

🔎 What is URL Encoding?

URL Encoding (also called Percent Encoding) is the process of converting characters into a format that can be safely transmitted over the internet via a URL. It ensures that special characters don't interfere with the structure of URLs. 📡

>>“A properly encoded URL is the bridge between human-readable text and machine-readable communication.” 🧠

🔤 Why is URL Encoding Important?

  • 🚫 URLs cannot contain spaces or certain symbols (like @, /, ?).
  • ✅ Encoding ensures URLs are valid and readable by browsers and servers.
  • 🌍 Encoding helps support non-ASCII characters in URLs (e.g., emojis or foreign languages).

⚙️ How URL Encoding Works

URL encoding replaces unsafe characters with a % followed by two hexadecimal digits. For example, a space becomes %20.

Example of URL Encoding

Plain Text: Hello World!
Encoded URL: Hello%20World%21

📚 Common Characters and Their Encoded Values

CharacterEncodedDescription
Space%20Whitespace
!%21Exclamation mark
@%40At symbol
/%2FForward slash
&%26Ampersand
=%3DEquals sign

🧪 Example in HTML

Let’s see how a URL with parameters is encoded in HTML:

Example HTML with Encoded URL

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

Note

💡 Browsers usually encode URLs automatically, but it’s good practice to encode query parameters when building URLs manually in code.

🛠️ Encoding with JavaScript

JavaScript provides built-in functions for encoding URLs:

JavaScript URL Encoding

const searchQuery = "hello world!";
const encoded = encodeURIComponent(searchQuery);
console.log(encoded); // Output: hello%20world%21

const fullURL = `https://example.com/search?q=${encoded}`;

✅ Best Practices

  • Use encodeURIComponent() when encoding individual query parameters.
  • Use encodeURI() when encoding an entire URL (but not parameter keys/values individually).
  • Avoid manually replacing characters; use built-in functions for reliability.
>>“Encode with care—URLs are the messengers of data on the web.” 🚀