HTML URL Encoding – Solved Practice Questions

By /

Introduction

URL encoding replaces special characters in a URL with a format that browsers can safely transmit over the internet. Spaces, symbols, and non-English characters are converted into encoded values. In this chapter, you’ll practice common URL encoding examples with simple solved questions. HTML URL Encoding help to build concepts.

Question 1

Problem Statement

Create a link that contains a space using URL encoding.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Space Encoding</title>
</head>
<body>

    <h1>Search HTML</h1>

    <a href="search.html?topic=HTML%20Basics">
        HTML Basics
    </a>

</body>
</html>

Output

Search HTML

HTML Basics

Step-by-Step Explanation

  • %20 represents a space.
  • Browsers use %20 instead of blank spaces in URLs.
  • Clicking the link opens the encoded URL.

Question 2

Problem Statement

Create a search link with multiple words.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Search URL</title>
</head>
<body>

    <a href="search.html?q=HTML%20Forms%20Tutorial">
        Search HTML Forms
    </a>

</body>
</html>

Output

Search HTML Forms

Step-by-Step Explanation

  • Every space becomes %20.
  • The query value is sent correctly to the server.
  • URL encoding prevents invalid URLs.

Question 3

Problem Statement

Pass multiple parameters in a URL.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Parameters</title>
</head>
<body>

    <a href="course.html?name=HTML&level=Beginner">
        HTML Course
    </a>

</body>
</html>

Output

HTML Course

Step-by-Step Explanation

  • ? starts the query string.
  • & separates multiple parameters.
  • Each parameter has a name and a value.

Question 4

Problem Statement

Create a URL containing an email address.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Email Parameter</title>
</head>
<body>

    <a href="profile.html?email=student%40gmail.com">
        View Profile
    </a>

</body>
</html>

Output

View Profile

Step-by-Step Explanation

  • %40 represents the @ symbol.
  • The email address is safely included in the URL.
  • URL encoding prevents special characters from causing problems.

Question 5

Problem Statement

Create a URL containing an ampersand as part of the text.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Ampersand Encoding</title>
</head>
<body>

    <a href="search.html?q=HTML%20%26%20CSS">
        HTML & CSS
    </a>

</body>
</html>

Output

HTML &amp; CSS

Step-by-Step Explanation

  • %26 represents the & symbol.
  • Without encoding, & is treated as a parameter separator.
  • Encoding keeps it as part of the text.

Question 6

Problem Statement

Create a URL that includes a question mark (?) as part of the text.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Question Mark Encoding</title>
</head>
<body>

    <a href="search.html?q=What%20is%20HTML%3F">
        What is HTML?
    </a>

</body>
</html>

Output

What is HTML?

Step-by-Step Explanation

  • %3F represents the ? symbol.
  • A question mark normally starts a query string.
  • Encoding allows it to be used as part of the text.

Question 7

Problem Statement

Create a URL that contains a hash (#) symbol.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Hash Symbol Encoding</title>
</head>
<body>

    <a href="search.html?q=C%23%20Programming">
        C# Programming
    </a>

</body>
</html>

Output

C# Programming

Step-by-Step Explanation

  • %23 represents the # symbol.
  • The hash symbol is normally used for page fragments.
  • Encoding keeps it as part of the search text.

Question 8

Problem Statement

Create a URL that contains a plus (+) symbol.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Plus Symbol Encoding</title>
</head>
<body>

    <a href="course.html?name=C%2B%2B">
        C++ Course
    </a>

</body>
</html>

Output

C++ Course

Step-by-Step Explanation

  • %2B represents the + symbol.
  • Encoding ensures the plus sign is treated as text.
  • This is useful for names such as C++.

Question 9

Problem Statement

Display a table of common URL encoding values.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Common URL Encoding</title>
</head>
<body>

    <table border="1">

        <tr>
            <th>Character</th>
            <th>Encoded Value</th>
        </tr>

        <tr>
            <td>Space</td>
            <td>%20</td>
        </tr>

        <tr>
            <td>@</td>
            <td>%40</td>
        </tr>

        <tr>
            <td>&</td>
            <td>%26</td>
        </tr>

        <tr>
            <td>#</td>
            <td>%23</td>
        </tr>

    </table>

</body>
</html>

Output

--------------------------
Character   Encoded Value
--------------------------
Space       %20
@           %40
&amp;           %26
#           %23

Step-by-Step Explanation

  • Different special characters have different encoded values.
  • Encoding makes URLs safe to use.
  • Browsers automatically understand these values.

Question 10

Problem Statement

Create a webpage that uses different URL-encoded values in hyperlinks.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>URL Encoding Example</title>
</head>
<body>

    <h1>Search Links</h1>

    <ul>

        <li>
            <a href="search.html?q=HTML%20Basics">
                HTML Basics
            </a>
        </li>

        <li>
            <a href="search.html?q=HTML%20%26%20CSS">
                HTML & CSS
            </a>
        </li>

        <li>
            <a href="course.html?name=C%2B%2B">
                C++ Course
            </a>
        </li>

        <li>
            <a href="profile.html?email=student%40gmail.com">
                Student Profile
            </a>
        </li>

    </ul>

</body>
</html>

Output

Search Links

• HTML Basics
• HTML &amp; CSS
• C++ Course
• Student Profile

Step-by-Step Explanation

  • %20 represents a space.
  • %26 represents &.
  • %2B represents +.
  • %40 represents @.
  • URL encoding allows special characters to be safely included in links.

Key Takeaways

  • URL encoding replaces special characters with encoded values.
  • %20 represents a space.
  • %40 represents @.
  • %26 represents &.
  • %23 represents #.
  • %2B represents +.
  • %3F represents ?.
  • URL encoding creates valid and safe URLs.
  • It is commonly used with query strings and form data.
  • Modern browsers automatically decode encoded URLs when needed.

Frequently Asked Questions (FAQs)

1. What is URL encoding?

URL encoding converts special characters into a format that browsers and servers can safely process.

2. Why is URL encoding needed?

Some characters have special meanings in URLs. Encoding prevents them from being misinterpreted.

3. What is the encoded value for a space?

%20

4. What is the encoded value for @?

%40

5. What is the encoded value for &?

%26

6. What is the encoded value for #?

%23

7. What is the encoded value for +?

%2B

8. What is the encoded value for ??

%3F

9. Do browsers automatically decode URL-encoded values?

Yes. Modern browsers decode URL-encoded values when processing web addresses.

10. Where is URL encoding commonly used?

It is commonly used in hyperlinks, search URLs, form submissions, and API requests.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top