URL query string anatomy

A query string starts after the ? in a URL and contains key–value pairs separated by &. Keys and values are percent-encoded (URL-encoded) to handle special characters.

https://example.com/search?q=hello+world&lang=en&page=2
                              ↑ key  ↑ value  ↑ separator

Encoding rules

Spaces can be encoded as + (form-encoded) or %20 (percent-encoded).
Special characters (&, =, #, ?) must be percent-encoded in values: %26, %3D, %23, %3F.
encodeURIComponent() in JavaScript handles encoding of values.

Repeated keys

A key can appear multiple times: ?tag=js&tag=css. How this is interpreted (as an array or as the last value winning) depends on the server-side parsing library. URLSearchParams.getAll("tag") returns all values as an array in JavaScript.

Fragment vs. query string

A URL has two distinct parts that are easily confused. The query string starts with ? and is sent to the server with every HTTP request. The fragment starts with # and is never sent to the server — it is processed entirely by the browser to scroll to an anchor or by client-side JavaScript (as in single-page app routing). Because fragments stay local, they are used for stateful UI state that shouldn’t trigger server round-trips.

Common developer mistakes

Missing encodeURIComponent: passing user-supplied values directly into a URL string without encoding causes injection bugs when values contain &, =, or ?.
+ vs. %20: the + character encodes a space only in application/x-www-form-urlencoded (HTML forms). In a bare URL path, %20 is the correct space encoding. Mixing these contexts causes subtle bugs.
Double-encoding: encoding an already-encoded string turns %20 into %2520 (encoding the % sign). Always start from the raw unencoded value.