HTML URL Encode

Understand the topic

URL encoding represents characters in URL components using percent-encoded bytes. Spaces and reserved punctuation can change how a URL is interpreted. Encode individual parameter values rather than encoding a whole assembled URL. HTML escaping is a separate step when placing the finished URL in an attribute. URLSearchParams handles query values without hand-building separators.

Worked example

const params = new URLSearchParams({ q: "HTML & CSS", level: "beginner" });
const url = "/search?" + params.toString();
// /search?q=HTML+%26+CSS&level=beginner

The ampersand inside the search text becomes %26, while the query separator between q and level remains an ampersand.

Practice

Build query parameters for a name value of Ama Mensah using URLSearchParams.

const params = new URLSearchParams({ name: "Ama Mensah" });
// name=Ama+Mensah

Common mistake

Do not confuse & in HTML markup with %26 in a URL parameter. They are different encodings for different contexts.

HTML documentation