HTML — URL Encode

Friendly intro – what & why

URLs are the addresses you type in a browser.
They can contain letters, numbers, and a few special symbols.
When a URL has spaces, quotes, or other characters that the browser might misinterpret, we must encode those parts.
Encoding turns a character into a percent sign followed by two hexadecimal digits (%20 for a space).
It guarantees the URL is read exactly as you intend.

Why encode URLs

• Browsers split a URL at spaces and other reserved characters.
• A broken link can lead to a 404 page or wrong data.
• Search engines and servers need a clear, unambiguous address.
• Encoding protects against accidental code injection or data corruption.

What characters need encoding

Character	Percent code	Reason
Space	%20	Delimits words
"	%22	Ends attributes
<	%3C	Starts tags
>	%3E	Ends tags
&	%26	Starts query parameters
#	%23	Anchors
%	%25	Percent sign itself
/	%2F	Path separator (optional)

Good to know: Only a few characters are truly “reserved.”
Most letters, digits, and -_.~ are safe and do not need encoding.

How to encode in HTML

Percent encoding

You can write the percent code directly in the href or src attribute.

<a href="https://example.com/search?q=coffee%20shop">Coffee shop</a>

Using JavaScript’s encodeURIComponent

If you build URLs dynamically, JavaScript can encode parts for you.

<script>
  const base = 'https://example.com/search';
  const term = encodeURIComponent('coffee shop');
  document.write(`<a href="${base}?q=${term}">Coffee shop</a>`);
</script>

Practical code examples

Example 1 – Space in link text

<a href="https://example.com/coffee shop">Coffee shop</a>

What the browser displays

The link text shows “Coffee shop”, but the browser treats the space as a separator, so the URL breaks.

Example 2 – Space in query string

<a href="https://example.com/search?q=coffee shop">Search</a>

What the browser displays

The link appears as “Search”, but the browser sends q=coffee and ignores “shop”.

Example 3 – Properly encoded query

<a href="https://example.com/search?q=coffee%20shop">Search</a>

What the browser displays

The link appears as “Search” and the server receives q=coffee shop correctly.

Example 4 – Form action with encoded URL

<form action="https://example.com/submit?name=John Doe" method="get">
  <button type="submit">Submit</button>
</form>

What the browser displays

The form submits, but name=John is sent; “Doe” is dropped.

Example 5 – Using encodeURIComponent in form

<form id="myForm" method="get">
  <input type="text" id="name" value="John Doe">
  <button type="submit">Submit</button>
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', e => {
    const name = encodeURIComponent(document.getElementById('name').value);
    e.target.action = `https://example.com/submit?name=${name}`;
  });
</script>

What the browser displays

The form submits with name=John%20Doe, and the server receives the full name.

Markdown table – raw vs encoded

Raw URL	Encoded URL	Why it matters
https://example.com/a b	https://example.com/a%20b	Space is a separator
https://example.com/page#top	https://example.com/page%23top	# starts an anchor
https://example.com/query?a&b=c	https://example.com/query?a%26b=c	& starts a new param

Common mistake: Forgetting to encode the entire query string; only the individual values need encoding, not the ? or = signs.

Common mistakes checklist

• I didn’t encode spaces in URLs.
• I left quotes inside attribute values unescaped.
• I used & without encoding in query strings.
• I encoded the whole URL, including ? and =.
• I didn’t test the link in multiple browsers.

Mini Practice

1. Write an <a> tag that links to https://example.com/search with the query coffee & tea.
2. Create a form that posts to https://example.com/submit and includes a text input for email. Encode the email value in the action URL.
3. Encode the URL https://example.com/page?name=John Doe and explain why each part is encoded.
4. Identify the error in this link: <a href="https://example.com/price?item=5$">Price</a> and correct it.
5. Use JavaScript to build a URL that includes a user‑entered tag string (#hashtag) and encode it properly.