HTML URL ENCODING

Maha



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 ou
tside 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>

Example 2:

<img src="https://www.example.com/images/logo.png" alt="Example Logo">





More topic in HTML

Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send