• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML URL Encode

← Previous Next →

URL encoding, also called percent encoding, is a method to safely include characters in a URL that would otherwise be invalid. URLs have strict rules about which characters can appear directly. Spaces, symbols, and non-ASCII characters must be converted into a safe format so that browsers and servers can handle them correctly. In this tutorial, you will learn the concept of URL encoding, why it is needed, how to use it in HTML and JavaScript, and practical examples to apply it in real-world scenarios.

What Is URL Encoding?

A URL can only include a limited set of characters such as letters (A-Z, a-z), numbers (0-9), and a few special symbols like -, _, ., and ~. All other characters must be encoded. URL encoding replaces unsafe characters with a percent sign % followed by their ASCII hexadecimal value.

Example

A search query with spaces and symbols:

https://example.com/search?query=HTML tutorial & examples

Encoded version:

https://example.com/search?query=HTML%20tutorial%20%26%20examples

Here:

  • Space → %20

  • Ampersand & → %26

Without encoding, the browser or server might misinterpret the URL.

Why URL Encoding Is Important

URL encoding ensures safe transmission of data over the internet. Without it:

  • Spaces may break links

  • Symbols like & or # can interfere with query strings

  • Non-English characters may display incorrectly

  • Form submissions may fail

Proper encoding guarantees compatibility across browsers, devices, and servers. It is especially important for multilingual websites and dynamic applications.

Characters That Must Be Encoded

Certain characters are reserved or unsafe in URLs. They include:

  • Spaces → %20

  • Reserved characters like ?, &, #, /, =

  • Special symbols like %, +, @, !, *, (, )

  • Non-ASCII characters such as ñ, ü, 中文

Example

Original URL:

https://example.com/file?name=My File (2025).pdf

Encoded URL:

https://example.com/file?name=My%20File%20%282025%29.pdf

Spaces become %20 and parentheses are encoded as %28 and %29.

How URL Encoding Works

Each unsafe character is replaced by % plus its ASCII hexadecimal value.

Character Encoded Value
Space %20
& %26
? %3F
# %23
+ %2B

Letters and numbers remain unchanged. This ensures the URL structure is preserved.

URL Encoding in HTML Forms

When a form uses the GET or POST method, browsers automatically encode input values in the query string. This allows special characters and spaces to be transmitted safely.

Example

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

User input HTML & CSS becomes:

/search?query=HTML%20%26%20CSS

This ensures the server receives the correct data.

Manual URL Encoding in HTML Links

Sometimes you need to manually encode links in <a> tags to prevent errors.

Example

<a href="https://example.com/search?query=HTML%20tutorial%20%26%20examples">
  Search HTML Tutorials
</a>

Spaces are replaced with %20 and the ampersand is %26.

URL Encoding in JavaScript

JavaScript provides functions to encode and decode URLs dynamically:

  • encodeURIComponent() – encodes a single URL component, like query parameters

  • encodeURI() – encodes an entire URL

  • decodeURIComponent() – decodes a component

  • decodeURI() – decodes a full URL

Example

let query = "HTML tutorial & examples";
let encodedQuery = encodeURIComponent(query);
console.log(encodedQuery); // HTML%20tutorial%20%26%20examples

let decodedQuery = decodeURIComponent(encodedQuery);
console.log(decodedQuery); // HTML tutorial & examples

Use encodeURIComponent for parameters, and encodeURI for the complete URL.

Practical Examples of URL Encoding

Example 1: Search Query

<a href="https://www.example.com/search?q=HTML%20Forms%20Tutorial">HTML Forms Tutorial</a>

This works safely even with spaces and symbols.

Example 2: File Download

<a href="files/My%20Document%20(2025).pdf">Download PDF</a>

Spaces and parentheses are encoded to prevent broken links.

Example 3: Multilingual URLs

<a href="https://example.com/profile?name=%E0%A4%A8%E0%A4%AE%E0%A4%B8%E0%A5%8D%E0%A4%A4%E0%A5%87">नमस्ते</a>

UTF-8 characters are encoded so servers and browsers interpret them correctly.

Common Mistakes with URL Encoding

  1. Double encoding: Encoding an already encoded URL can break it (% becomes %25).

  2. Not encoding query parameters: Special symbols may break server parsing.

  3. Ignoring spaces: Spaces should always be encoded as %20 or +.

Best Practices

  • Always use UTF-8 encoding for web pages.

  • Encode all dynamic query parameters.

  • Use encodeURIComponent() for parameters, encodeURI() for full URLs.

  • Test encoded URLs on multiple browsers and devices.

  • Avoid over-encoding; only encode unsafe characters.

Summary of HTML URL Encode

HTML URL encoding converts unsafe characters like spaces, symbols, and non-ASCII letters into a safe format for transmission over the internet. You learned how encoding works, the characters that need encoding, and practical ways to encode URLs in HTML and JavaScript. Correct URL encoding ensures browser compatibility, proper server interpretation, and prevents broken links in forms, queries, and hyperlinks. Mastering URL encoding is essential for building reliable, multilingual, and dynamic websites.

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.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top