HTML URL Encoding: A Complete Guide for Beginners

When working with websites, you often need to pass information through URLs. But URLs cannot safely contain every character in its original form. Spaces, special characters, and non-ASCII characters may need to be represented using URL encoding, also called percent-encoding.

In this guide, we'll understand what URL encoding is, why it is important, common encoded characters, and how to use it with HTML and JavaScript.

What Is URL Encoding?

URL encoding converts characters into a format that can be safely transmitted inside a URL.

For example:

Hello World

can be represented as:

Hello%20World

Here, %20 represents a space.

URL encoding is useful when:

Passing user input through URLs
Creating search URLs
Building API requests
Handling query-string parameters
Working with spaces and special characters
Supporting non-ASCII characters
URL Encoding in HTML

HTML links can contain encoded URLs using the href attribute:

Search HTML and CSS

The browser can interpret the encoded characters and request the appropriate URL.

URL Encoding in JavaScript

JavaScript provides built-in functions for URL encoding.

encodeURIComponent()

encodeURIComponent() is commonly used when encoding an individual query parameter or piece of URL data.

const keyword = "HTML & CSS";

const encoded = encodeURIComponent(keyword);

console.log(encoded);

Output:

HTML%20%26%20CSS

This is useful because characters such as & should not accidentally become part of the URL's structure.

encodeURI()

encodeURI() is generally used when working with an entire URL while preserving URL structure such as /, ?, and &.

For example:

const url = "https://example.com/search?q=hello world";

console.log(encodeURI(url));

The distinction between encodeURI() and encodeURIComponent() is important: the first preserves structural URL characters, while the second is designed for encoding individual components.

URL Decoding

URL encoding can also be reversed.

JavaScript provides:

decodeURIComponent()

For example:

const encoded = "HTML%20%26%20CSS";

const decoded = decodeURIComponent(encoded);

console.log(decoded);

Output:

HTML & CSS
URL Encoding vs HTML Encoding

URL encoding and HTML encoding are different concepts.

URL encoding uses percent notation:

& → %26
< → %3C

→ %3E

HTML encoding uses HTML entities:

& → &
< → <

→ >

They solve different problems, so choosing the appropriate encoding method is important when developing web applications.

A Common URL Encoding Mistake

One common mistake is double encoding.

For example, if %20 is encoded again, the % character can become %25, producing:

%2520

Instead of:

%20

Therefore, avoid encoding data repeatedly unless the application specifically requires another encoding layer.

Conclusion

URL encoding is an important concept for HTML and web development. It ensures that spaces, special characters, and other data can be safely represented within URLs.

If you're learning HTML and want to explore URL encoding along with other HTML concepts, TPointTech's HTML tutorial provides additional learning material and examples.