HTML URL Encoding
In HTML, a URL (Uniform Resource Locator) is used to specify addresses on the web.Encoding in URLs is important because URLs can only be sent over the Internet using the ASCII character set.
If a URL contains characters outside this set, they need to be encoded. Here’s a brief overview of how URLs and encoding work
URL Structure:
A URL typically has the following structure:
scheme://host:port/path?query#fragment
Scheme: Indicates the protocol (e.g., http, https, ftp).
Host: Domain name or IP address (e.g., www.example.com).
Port: Optional, specifies the port number (default ports are 80 for HTTP and 443 for HTTPS).
Path: Specifies the path to the resource on the server (e.g., /path/to/page).
Query: Optional, provides additional parameters (e.g., ?key=value).
Fragment: Optional, points to a specific section within the resource (e.g., #section1).
URL Encoding:
URL encoding replaces non-ASCII characters with a "%" followed by two hexadecimal digits. Spaces are encoded as "%20" or replaced by a plus sign "+" in query strings.
Common Encodings:
- Space: %20 or +
- Double quotes ("): %22
- Number sign (#): %23
- Percent (%): %25
- Less than (<): %3C
- Greater than (>): %3E
Simple URL:
https://www.example.com/page
URL with Query Parameters:
https://www.example.com/search?q=html+url+encoding
URL with Special Characters:
https://www.example.com/path/to/page?query=hello%20world%20%23welcome
Encoding in HTML:
When embedding URLs in HTML, you often need to ensure they are properly encoded to avoid issues with special characters.
In these examples, special characters in the URL are encoded to ensure they are correctly interpreted by browsers. Here’s how you might use URLs in HTML:
Example 1:
<a href="https://www.example.com/search?q=html%20encoding%20example">Search</a>
