What is URL Encoding? Complete Guide with Examples
Last updated: Invalid Date
URL encoding (percent-encoding) is the mechanism for encoding characters that have special meaning in URLs or aren't allowed in URL syntax. Characters are replaced with a percent sign (%) followed by their hexadecimal ASCII/UTF-8 value. For example, a space becomes %20, an ampersand becomes %26, and non-ASCII characters like é become multi-byte sequences like %C3%A9.
How Does URL Encoding Work?
URLs can only contain a limited set of unreserved characters (A-Z, a-z, 0-9, -, _, ., ~). All other characters must be percent-encoded: the character is converted to its UTF-8 byte representation, and each byte is encoded as %XX where XX is the hexadecimal value. Reserved characters (/, ?, #, &, =) have special URL meaning and must be encoded when used as data values rather than delimiters. JavaScript provides encodeURIComponent() for encoding data values and encodeURI() for encoding complete URIs.
Key Features
- Percent-encoding of special characters (%20 for space, %26 for &, %3D for =)
- UTF-8 support for encoding international characters in URLs
- Distinction between reserved characters (structural) and unreserved characters (data)
- JavaScript functions: encodeURIComponent (data values) vs encodeURI (full URLs)
- Form encoding (application/x-www-form-urlencoded) where spaces become + instead of %20
Common Use Cases
Query String Parameters
When passing user input as URL query parameters, special characters must be encoded to prevent breaking the URL structure. A search for 'cats & dogs' becomes '?q=cats%20%26%20dogs'.
API Request Building
Programmatically constructing API URLs requires encoding parameter values that may contain reserved characters, ensuring the URL parses correctly on the server.
Form Data Submission
HTML forms with method=GET encode field values in the URL using application/x-www-form-urlencoded format, where spaces become + and special characters are percent-encoded.
Why URL Encoding Matters
Understanding url encoding is essential for anyone working in software development. It is not just a theoretical concept — it directly impacts the quality, efficiency, and reliability of your work. Professionals who understand the underlying principles make better decisions about which tools and approaches to use.
Whether you are a beginner learning the fundamentals or an experienced professional looking for a quick refresher, grasping how url encoding works helps you debug issues faster, communicate more effectively with your team, and choose the right tool for each specific task.
Getting Started with URL Encoding
The fastest way to learn url encoding is to experiment with it hands-on. Use our free tools linked above to try different inputs and see how the output changes. Start with simple examples, then gradually increase complexity as you build intuition for how url encoding behaves.
For deeper learning, explore the related guides linked at the bottom of this page — they cover adjacent concepts that will strengthen your understanding of the broader ecosystem. Each guide includes practical examples and links to tools you can use immediately.
Frequently Asked Questions
What is the difference between encodeURI and encodeURIComponent?
Why is space encoded as %20 sometimes and + other times?
Do I need to encode forward slashes in URLs?
How are non-ASCII characters URL-encoded?
Related Guides
Related Tools
Was this page helpful?
Written by
Tamanna Tasnim
Senior Full Stack Developer
Full-stack developer with deep expertise in data formats, APIs, and developer tooling. Writes in-depth technical comparisons and conversion guides backed by hands-on engineering experience across modern web stacks.