HTML URL Encoding

HTML URL Encoding

URL encoding, commonly called percent-encoding, represents certain characters in a URL using a percent sign followed by two hexadecimal digits.

Encoding allows characters that cannot be used directly in some parts of a URL, or that have a special meaning there, to be represented safely. Modern web content normally encodes text as UTF-8 before the resulting bytes are percent-encoded when required.

URL Structure

A URL can contain several components, including a scheme, host, port, path, query, and fragment. Different characters can have special meanings depending on the component in which they appear.

https://www.example.com/products/item.html?color=blue#details

Percent-Encoding

Percent-encoding represents a byte as a percent sign followed by two hexadecimal digits. For ASCII characters, the hexadecimal value corresponds directly to the character's ASCII byte value.

%HH

For example, a space has the hexadecimal byte value 20, so its percent-encoded representation is %20.

Unreserved Characters

Letters, digits, hyphens, periods, underscores, and tildes are unreserved URL characters. They can normally appear without percent-encoding.

A-Z
a-z
0-9
-
.
_
~

Although an unreserved character can sometimes appear in percent-encoded form, URLs are generally clearer and more consistent when unreserved characters are left unencoded.

Reserved Characters

Reserved characters have special purposes within URL syntax. Whether a reserved character should be encoded depends on where it appears and whether it is being used for its reserved purpose.

Common Encoded Characters

The following table lists commonly encountered ASCII characters and their percent-encoded representations.

Encoding Spaces

A space is represented as %20 in percent-encoding. In data encoded using the application/x-www-form-urlencoded format, spaces are commonly represented by a plus sign (+).

HTML Tutorial
HTML%20Tutorial

Form-encoded query data may instead appear as:

search=HTML+Tutorial

A literal plus sign in form-encoded data is percent-encoded as %2B so that it is not interpreted as a space.

UTF-8 URL Encoding

Characters outside ASCII are represented using their UTF-8 byte sequence, with each byte that requires encoding written as a separate percent-encoded value.

Percent-encoding works with encoded bytes rather than directly replacing a Unicode code point with a hexadecimal number.

Query Strings

A query string follows the question mark in a URL and is commonly used to pass name-value data to a server or web application.

https://www.example.com/search?q=html&page=2

When a value contains characters that would otherwise be interpreted as query syntax, those characters need to be encoded appropriately.

Original value:
HTML & CSS

Percent-encoded value:
HTML%20%26%20CSS

In application/x-www-form-urlencoded data, the same value may be represented as HTML+%26+CSS.

URLs in HTML

URL encoding and HTML character references solve different problems. Percent-encoding is part of URL syntax, while HTML character references are used to represent characters within HTML source code.

For example, an ampersand separating query parameters in an HTML href attribute should be written as & in the HTML source.

<a href="https://www.example.com/search?q=html&amp;page=2">Search</a>

The browser interprets & as the ampersand character in the URL. The ampersand remains part of the query syntax and is not replaced by %26 because it is being used as a parameter separator.

If an ampersand is part of a query parameter's actual value instead, it must be encoded so it is not interpreted as a separator.

https://www.example.com/search?q=HTML%20%26%20CSS

URL Encoding Best Practices

• Use UTF-8 when encoding text for modern URLs.
• Leave unreserved characters unencoded when possible.
• Encode reserved characters when they are data rather than being used for their special URL purpose.
• Use %20 for a percent-encoded space and understand that form-encoded data commonly uses + for spaces.
• Encode a literal plus sign as %2B when using form-encoded data.
• Do not confuse URL percent-encoding with HTML character references.
• Write query-string ampersands as & when they appear in HTML attribute values.
• Avoid manually constructing complex encoded URLs when a programming language or browser URL API can encode the individual components correctly.