HTML URL Encode (Reference)

Introduction

URL encoding in HTML attributes (percent-encoding in href, src, action, data URLs) prevents broken links, parser ambiguities, and injection when spaces and Unicode appear in paths. Staff engineers encode in correct context — URL encoder for href, HTML entity encoder for text, not interchangeable.

Business problem

Business pressure: Unencoded space in href breaks attribute tokenization; raw Unicode in URL path works inconsistently across servers — 404 spikes on localized slugs.

• Security: Double-encoding bypass filters in open redirects.
• SEO: Broken encoded canonical URLs split equity.
• A11y: URL read aloud by SR — encode doesn't fix need for descriptive link text.

Why this feature exists

Platform motivation: URLs allow limited ASCII set; percent-encoding RFC 3986/WHATWG URL standard carries other bytes.

• History: application/x-www-form-urlencoded separate rules (+ for space).
• Alternative rejected: Raw spaces in URLs — invalid.
• Modern role: URLSearchParams API; Punycode for IDN hostnames.

Browser internals

URL parser: Browser resolves relative URLs against base; encodes path on fetch; href attribute value parsed as URL not HTML text.

• Parser: Unquoted href with space ends attribute early — classic bug.
• DOM: anchor.href property returns absolute encoded URL.
• Script impact: encodeURI vs encodeURIComponent different reserved char sets.

Rendering workflow

Rendering: URL encoding doesn't affect layout; broken href from bad encoding yields failed resource load — image CLS or broken nav.

• Critical path: Wrong preload href encoding — LCP resource miss.
• Layout: N/A.
• Paint: Broken img src 404 icon.

Feature deep dive

Encoding rules: encodeURIComponent for query param values; encodeURI for full URI minus already-encoded parts; form method GET builds query with application/x-www-form-urlencoded (+ space). In HTML attrs quote URLs with special chars.

• Reserved: ? # & = encode in query values appropriately.
• Unicode: IRIs UTF-8 percent-encoded in path; IDN punycode in host.
• data: URLs base64 or percent-encoded — CSP considerations.

<a href="/search?q=${encodeURIComponent("café & crêpe")}">Search pastries</a>
<form action="/api" method="get">
  <input name="tag" value="rock & roll">
</form>
<!-- Browser encodes on submit; server must decode -->

Accessibility analysis

A11y: Link text still must be meaningful — encoded URL not read as primary name if text good.

• Screen readers: Avoid raw URL as link text — encode irrelevant to SR if text is "Pricing".
• Keyboard: N/A encoding specific.
• WCAG: 2.4.4 link purpose in context.

SEO impact

SEO: Canonical URLs must be consistently encoded; Google normalizes some variants — pick one in HTML canonical.

• Crawl: 404 from encoding mismatch between href and server route.
• Rich results: URL fields in JSON-LD must be valid URI.
• Core Web Vitals: Failed resource load from bad src encoding hurts LCP.

Security considerations

Open redirect: Validate decoded URL allowlist; double-encoding %252F bypass; javascript: after decode still blocked.

• XSS: javascript: in href — validate protocol after decode.
• CSP: navigate-to directive optional control.
• SSRF: Server-side fetch of user-provided URL — decode before validate.

Performance impact

Perf: Long over-encoded URLs slightly increase HTML bytes — negligible; cache key confusion if encoding inconsistent.

• LCP: Correct img src encoding avoids 404 retry.
• INP: N/A.
• CLS: Missing image from bad URL.

Real production example

CMS slug pipeline: NFC normalize → slugify ASCII → encodeURIComponent only in query builder — path segments UTF-8 encoded once.

Enterprise usage

Enterprise: URL builder library mandated — no string concat in templates; lint href for unencoded spaces.

• Design system: Link component encodes query params.
• CMS: Preview URLs generated server-side.
• CI gates: Unit tests on encoding edge cases café, 中文, &.

Common production failures

What breaks in prod: Marketing UTM builder didn't encode & in campaign name — analytics params truncated.

• Incident: Open redirect filter bypass via double encoding — security patch.
• SEO regression: Canonical with space unencoded — ignored by Google.
• Perf regression: img src 404 cascade from encoding bug CDN side.

Architecture review questions

• Are query params built with encodeURIComponent?
• Are href attributes quoted when URLs contain & or spaces?
• Is URL decoding done once before security validation?
• Are canonical URLs consistently encoded?
• Is link text descriptive—not raw encoded URL?

Hands-on project

Project: Build search form with GET; verify browser encoding; server decode doc; add malicious redirect test case.

• Deliverable: HTML form + encoding unit tests.
• Verify: café query round-trips correctly.
• Stretch: IDN hostname link punycode note.

Interview questions

Try it yourself

Edit the HTML, CSS, or JS panels — the preview updates as you type.

Summary

URL encode reference covers percent-encoding in href/src/action, form GET application/x-www-form-urlencoded, encodeURI vs encodeURIComponent, and security pitfalls in open redirects and double-encoding.