HTML URL Encode

Charset decides how the HTML file turns bytes into letters. URL encoding (percent-encoding) is a different problem: how characters travel safely inside a URL — in links, redirects, and form query data — without breaking the URL’s own structure. Spaces, non-ASCII letters, and reserved symbols often need a % + hex form so browsers and servers agree on the meaning.

What URL encoding is

A URL has reserved characters that structure the address: ? starts a query, & separates pairs, = joins names to values, # starts a fragment. If those characters appear as data inside a value, they must be encoded so they are not mistaken for structure. Unsafe characters such as spaces are also encoded for reliable transport.

Direct answer

URL encoding replaces a character with % followed by two hexadecimal digits. The classic example: a space becomes %20. Many browsers and HTML forms encode query values automatically when you submit. You still need the idea when you hand-write href query strings, debug a broken link, or read an address bar full of percent-codes.

Common percent encodings

Encoded query in a link

Hand-writing a search query with a space is the clearest beginner demo. Encode the space in the value; leave the structural ? and = alone.

Reading the sample

• search.html is the path; keep path filenames simple when you control them
• ?q= starts a query parameter named q
• html%20links is the value “html links” with a space encoded as %20
• The visible link text can stay human-readable; encoding belongs in the URL

Prefer clean filenames; encode values

Encoding an entire page filename that contains spaces is awkward for everyone. Prefer my-page.html over my page.html. Use percent-encoding mainly for query values and special characters inside URLs you must assemble by hand.

Forms and browsers often help

When a user submits an HTML form with method="get", browsers typically encode field values into the query string for you. That does not remove the need to understand %20 when you read logs, share links, or write href by hand. Knowing the pattern makes debugging faster.

Not the same as HTML entities

In HTML text, & is an entity for the ampersand character. In a URL, an ampersand that is data may appear as %26. Different tools, different contexts. Likewise, file charset UTF-8 is about decoding the .html file — it does not replace percent-encoding inside URLs.

Non-ASCII in URLs (beginner note)

Letters outside basic ASCII may appear as longer percent-sequences in real addresses. You do not need to memorize those charts in this session. Remember the rule: when a character is unsafe or reserved as data, percent-encoding is how URLs carry it. For learning pages, keep demo queries in simple Latin plus %20 until you are comfortable.

Practice in your editor

1. Create a link whose href includes a query like ?q=hello%20world.
2. Open the link and observe the address bar.
3. Change %20 to a raw space in the source, reload, and compare how the browser normalizes or breaks the URL.
4. Rename a practice file to use hyphens instead of spaces and update links accordingly.
5. Write one query value that would need %26 if an ampersand were part of the data — then confirm you did not encode the structural & between parameters.

Easy mistakes

• Pasting raw spaces into URLs in code without checking the result
• Percent-encoding the https:// scheme or the whole structural skeleton by mistake
• Confusing HTML entities (&) with URL codes (%26)
• Putting spaces in every filename and hoping encoding will save navigation forever
• Encoding structural ? / & / = that should stay as URL syntax between parts

Summary

• URL encoding uses % plus two hex digits (space → %20)
• Reserved and unsafe characters need encoding when they are data
• Prefer simple filenames; encode query values when you hand-write them
• Forms and browsers often encode automatically on submit
• Percent-encoding is not the same job as HTML entities or file charset