URL

Understand URLs — the addresses that locate every resource on the web, and what each part means.

What you'll learn

What a URL is and what it points to
The anatomy of a URL: scheme, host, path, query, fragment
How query parameters pass data to the server
How URL encoding handles special characters

Concept

URL

A URL (Uniform Resource Locator) is the address of a resource on the web. Every web page, image, and API endpoint has a URL. When you type one in the browser, it knows exactly where to send the HTTP request.

Anatomy of a URL

https://api.example.com:443/users/42?sort=name&page=2#settings

| Part | Example | Meaning | |------|---------|---------| | Scheme | https | The protocol (http, https, ftp) | | Host | api.example.com | The server's domain name | | Port | :443 | The connection port (often omitted) | | Path | /users/42 | The specific resource on the server | | Query | ?sort=name&page=2 | Key-value parameters | | Fragment | #settings | An anchor within the page |

Query Parameters

The query string (after ?) passes data to the server as key-value pairs. Multiple parameters are joined with &:

/search?q=javascript&limit=10&lang=en

Servers read these to filter, sort, or paginate results. They are visible in the URL, so never put secrets there.

URL Encoding

URLs can only contain certain characters. Spaces, non-ASCII letters, and symbols must be percent-encoded — replaced with a % followed by their hex code. A space becomes %20; a Chinese character becomes several %XX sequences.

https://example.com/search?q=hello%20world

This is why URLs sometimes look ugly with lots of % signs. The browser and server handle encoding automatically, but you should understand it when building URLs by hand.

URLs vs. URIs vs. URNs

Strictly, a URL *locates* (tells you where), a URN *names* (tells you what), and a URI is the umbrella term. In everyday web development, "URL" is what you will use.

Example

              // Building and parsing URLs with the built-in URL API
const url = new URL("https://api.example.com/users");
url.searchParams.set("sort", "name");
url.searchParams.set("page", "2");
url.searchParams.set("q", "hello world");  // auto-encoded!


console.log(url.toString());
// https://api.example.com/users?sort=name&page=2&q=hello+world

console.log(url.searchParams.get("q"));   // "hello world" (decoded)
console.log(url.host);      // "api.example.com"
console.log(url.pathname);  // "/users"

The URL API handles encoding and parsing for you. searchParams.set encodes automatically; searchParams.get decodes. Never build query strings by hand — use this API.

Try it

URL Encoder
Percent-encode and decode URLs — see exactly how special characters are represented.

Common mistakes

The mistake

Building query strings by concatenating strings without encoding.

The fix

Use the URL and URLSearchParams APIs. They encode automatically. Hand-building URLs leads to bugs with spaces, ampersands, and non-ASCII characters.

The mistake

Putting sensitive data (API keys, tokens) in the URL query string.

The fix

URLs are logged by servers, proxies, and browser history. Put secrets in HTTP headers or request bodies, never in the URL.

Related Tools

URL Encoder
Encode and decode URLs and query strings.

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors

URL