URL Encoding Explained: A Complete Guide

What Is URL Encoding?

URL encoding, also known as percent-encoding, is a mechanism for encoding information in a Uniform Resource Identifier (URI). It replaces unsafe or reserved ASCII characters with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII code.

For example, a space character is encoded as %20, the at symbol (@) becomes %40, and a hash (#) becomes %23.

Why Is URL Encoding Necessary?

URLs are transmitted over the internet using ASCII characters. However, URLs often need to contain characters outside the ASCII range, or characters that have special meaning in URL syntax. URL encoding solves this problem by providing a way to represent these characters safely.

Common reasons you need URL encoding:

• Spaces in URLs: Spaces are not allowed in URLs and must be encoded as %20 or +
• Special characters: Characters like &, =, ?, and # have special meaning in URLs
• Non-ASCII characters: Characters from non-Latin alphabets must be encoded
• Form submissions: Form data sent via GET requests must be URL encoded

Reserved vs. Unreserved Characters

URL characters fall into two categories:

Unreserved Characters (never encoded)

These characters are safe to use in URLs without encoding: A-Z a-z 0-9 - _ . ~

Reserved Characters (must be encoded when used as data)

These characters have special meanings in URLs: : / ? # [ ] @ ! $ & ' ( ) * + , ; =

When these characters appear as data (rather than as URL syntax elements), they must be percent-encoded.

How Percent-Encoding Works

Percent-encoding works by:

1. Taking the character that needs to be encoded
2. Converting it to its ASCII code (or UTF-8 byte sequence for non-ASCII)
3. Expressing each byte as a two-digit hexadecimal number
4. Prefixing each hex number with a percent sign (%)

For example, the exclamation mark ! has ASCII code 33, which is 21 in hexadecimal. So it becomes %21.

Common URL Encoding Examples

URL Encoding in Different Contexts

Query Strings

In query strings (the part after ?), both the keys and values should be URL encoded. For example:

Path Segments

Path segments in URLs can also contain encoded characters. For example, a file named "my document.pdf" in a URL would become:

Form Data

When HTML forms are submitted using the GET method, form field values are URL encoded and appended to the URL as a query string. With POST, data is URL encoded in the request body.

URL Encoding vs. HTML Encoding

It is important not to confuse URL encoding with HTML encoding. HTML encoding converts characters like < to < for safe display in HTML. URL encoding converts characters for safe transmission in URLs.

They are used in different contexts and should not be interchanged.

JavaScript URL Encoding Functions

JavaScript provides built-in functions for URL encoding:

• encodeURIComponent() — Encodes all special characters except: A-Z a-z 0-9 - _ . ! ~ * ' ( ). Best for encoding individual parameter values.
• encodeURI() — Encodes a complete URI, but does not encode characters that are part of the URI syntax (: / ? # [ ] @ ! $ & ' ( ) * + , ; =). Best for encoding full URLs.
• decodeURIComponent() — Decodes a URL-encoded string
• decodeURI() — Decodes a complete URI

For most use cases involving encoding form values or query parameters, encodeURIComponent() is the right choice.

Try Our Free URL Encoder/Decoder Tool

BestTools.website provides a free URL Encoder/Decoder tool that lets you instantly encode or decode any text. Simply paste your text, click a button, and get the result — no signup required.

Our tool handles all special characters correctly and works in your browser without sending your data to any server, keeping your information private.

Conclusion

URL encoding is a fundamental concept in web development. Whether you are building web applications, working with APIs, or simply trying to understand why URLs look the way they do, knowing how percent-encoding works is essential.

Key takeaways: unreserved characters never need encoding, reserved characters must be encoded when used as data, and JavaScript's encodeURIComponent() is your best friend for encoding query parameter values.