• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML URL Encode

← Previous Next →

URL Encoding is the process of converting characters into a format that can be transmitted over the Internet. URLs can only be sent over the Internet using the ASCII character set, so URL encoding converts non-ASCII or unsafe characters into a format using % followed by two hexadecimal digits.

🔹 Why URL Encode?

  • URLs cannot contain spaces or certain special characters.

  • Encoding converts reserved characters into a valid format.

  • Ensures URLs are transmitted correctly and safely.

🔹 Characters that Need Encoding

  • Space ( ) → %20 or +

  • < → %3C

  • > → %3E

  • # → %23

  • % → %25

  • { → %7B

  • } → %7D

  • | → %7C

  • \ → %5C

  • ^ → %5E

  • ~ → %7E

  • [ → %5B

  • ] → %5D

  • ` → %60

🔹 URL Encoding Example

Original URL with unsafe characters:

https://example.com/search?query=HTML URL Encode & test

URL Encoded:

https://example.com/search?query=HTML%20URL%20Encode%20%26%20test

💻 Example in JavaScript

const originalUrl = "https://example.com/search?query=HTML URL Encode & test";
const encodedUrl = encodeURIComponent("HTML URL Encode & test");
console.log(encodedUrl);
// Output: HTML%20URL%20Encode%20%26%20test

const fullUrl = `https://example.com/search?query=${encodedUrl}`;
console.log(fullUrl);
// Output: https://example.com/search?query=HTML%20URL%20Encode%20%26%20test

🔹 URL Encoding in HTML Forms

HTML forms automatically encode form data when using GET or POST method.

Example:

<form action="/search" method="get">
  <input type="text" name="query" />
  <input type="submit" value="Search" />
</form>

If user enters HTML URL Encode & test, the browser encodes it before sending.

Practice Questions

Q1. Explain why spaces are encoded in URLs.

Q2. Encode the URL parameter name=John Doe & Sons.

Q3. Decode the encoded URL string %3Cdiv%3EHello%3C%2Fdiv%3E.

Q4. Write JavaScript to encode a query string for a URL.

Q5. Create an HTML form that sends URL-encoded data using GET method.

Q6. Show examples of reserved characters in URLs that must be encoded.

Q7. Explain difference between encodeURI and encodeURIComponent in JavaScript.

Q8. Describe how browsers handle URL encoding in form submission.

Q9. Write a PHP snippet to decode URL encoded strings.

Q10. List characters that do NOT need encoding in URLs.

HTML URL Encode Quiz

Q1: What character is used to represent encoded characters in URLs?

A. #
B. %
C. $
D. &

Q2: How is a space encoded in a URL?

A. %20 or +
B. %25
C. #
D. _

Q3: Which JavaScript function encodes URI components?

A. escape()
B. encodeURI()
C. encodeURIComponent()
D. decodeURI()

Q4: What does %26 represent in URL encoding?

A. Space
B. Ampersand (&)
C. Percent sign (%)
D. Plus sign (+)

Q5: When submitting a form using GET method, what does the browser do with form data?

A. Leaves it as-is
B. Encrypts it
C. URL encodes it
D. Compresses it

Q6: Which character does NOT need to be encoded in a URL?

A. a
B. %
C. #
D. &

Q7: What is the difference between encodeURI() and encodeURIComponent()?

A. No difference
B. encodeURI() encodes the full URI except reserved characters; encodeURIComponent() encodes every character except a few
C. encodeURI() encodes everything; encodeURIComponent() encodes nothing
D. They decode URLs

Q8: Which PHP function is used to decode URL-encoded strings?

A. urlencode()
B. urldecode()
C. htmlspecialchars()
D. htmlentities()

Q9: Which symbol indicates the start of URL query parameters?

A. &
B. ?
C. #
D. /

Q10: Which of the following is NOT a reserved character in URL?

A. :
B. /
C. A
D. ?
← Previous Next →
Login
Go Back Top