HTML URL Encode

HTML URL Encoding

A URL (Uniform Resource Locator) is the unique address for a resource on the web, like a web page or an image.

URLs can use human-readable names (like example.com) or IP addresses (like 192.168.1.1). Most people use names because they are easier to remember.

Understanding URL Structure

Web browsers use URLs to request resources from web servers. When you click a link, the browser uses the URL specified in the <a> tag’s href attribute.

A typical URL, like https://www.example.com/path/to/resource.html, follows a standard structure:

scheme://host.domain:port/path/filename

Explanation:

• scheme: Defines the protocol (e.g., http, https). https is the secure standard.
• host: Often www, but can vary.
• domain: The domain name (e.g., example.com).
• port: The network port (default for http is 80, for https is 443). Usually omitted.
• path: The path to the resource on the server.
• filename: The name of the specific resource (e.g., resource.html).

Common URL Schemes

Here are some common URL schemes:

Scheme	Stands For	Primary Use
http	HyperText Transfer Protocol	Standard web pages (Not encrypted - Avoid for sensitive data).
https	Secure HyperText Transfer Protocol	Secure (encrypted) web pages. The standard for modern websites.
ftp	File Transfer Protocol	Used for transferring files (less common in browsers now).
file	Local File	References a file on your local computer.

URL Encoding (Percent-Encoding)

URLs can only contain a limited set of characters from the ASCII character set.

Characters outside this standard set (like spaces, accented letters, or symbols) must be encoded before being sent over the internet. This process is called URL encoding or Percent-Encoding.

URL encoding replaces unsafe or non-ASCII characters with a ”%” followed by their two-digit hexadecimal representation (based on their UTF-8 byte value).

For example, a space character is often encoded as %20 (although older systems sometimes used +, %20 is the standard for paths and query strings). The character € (Euro sign) becomes %E2%82%AC in UTF-8 encoding.

Most modern web browsers and development frameworks handle URL encoding automatically when you navigate or submit forms. However, understanding encoding is crucial for debugging issues with URLs or when constructing URLs programmatically (e.g., in JavaScript using encodeURIComponent()).

URL Encoding Example in a Form

Consider a simple HTML form:

<form action="/search" method="get">
  <input type="text" name="query" value="HTML tips & tricks">
  <button type="submit">Search</button>
</form>

When you click “Submit”, the browser encodes the input value before sending it to the server. The space becomes %20, and the ampersand & becomes %26. The resulting URL might look like:

`/search?query=HTML%20tips%20%26%20tricks`

Character Encoding Matters

The specific hexadecimal codes used in percent-encoding depend on the character encoding of the HTML document. The universal standard and strong recommendation for web pages is UTF-8.

Using UTF-8 ensures that a wide range of international characters are handled consistently.

Example encodings for common characters using UTF-8:

Character	UTF-8 Percent-Encoding
€	%E2%82%AC
£	%C2%A3
©	%C2%A9
®	%C2%AE
ü	%C3%BC
ñ	%C3%B1
	%20
&	%26
?	%3F

For a comprehensive guide on URL encoding and related functions, refer to the MDN Web Docs.