A URL locates a resource on the web: scheme (https), host, path, query, and fragment. Special characters in components must follow encoding rules so parsers stay unambiguous.
Percent-encoding represents bytes as %XX hex pairs, usually for UTF-8 bytes of characters unsafe in that URL part—spaces, slashes in queries, unicode, and reserved delimiters.
Unencoded & or = would break query parsing. Encoding preserves user data (names, search terms) as literal values instead of structure characters.
encodeURIComponent is stricter and escapes more characters, which is what you usually want for query parameter values. encodeURI is meant for full URIs with existing structure.
Percent encoding uses %20 for spaces in paths. application/x-www-form-urlencoded historically uses '+'. The tool follows the mode you select if options are exposed.
Usually you only encode components such as query values. Encoding a full URL can break its scheme and slashes—encode parts, not the whole URL string blindly.
URI is the umbrella term. URLs locate resources (https://…). URNs name resources by name (urn:isbn:…). Encoding rules apply to URIs broadly.
IDNA maps Unicode domains to ASCII punycode under the hood. Path and query still use percent-encoding for non-ASCII; layers work together in modern browsers.
Encoding an already-encoded string turns % into %25 and grows the string. Decode once, then encode once at the boundary where data enters a URL.
It is how HTML forms often POST data: key=value pairs joined by &, with values encoded (often + for space). APIs may expect JSON instead; know your content type.