A URL (Uniform Resource Locator) identifies a resource and describes how to access it. For an ordinary web link, the address tells your browser which site to contact and which resource to request. Reading its parts makes links easier to understand, share, and troubleshoot.
Read an address in parts
Consider this fictional library address. The reserved example.org domain is used for illustration; this is not a working library service.
https://library.example.org:8443/books/space?q=moon&sort=title#reviews| Part | Example | What it does |
|---|---|---|
| Scheme | https | Selects HTTPS: HTTP communication protected by TLS. |
| Host | library.example.org | Identifies the server host; here it is a domain name. Hosts can also be IP addresses. |
| Port | 8443 | Selects a network service port. HTTPS normally uses 443 when a port is omitted. |
| Path | /books/space | Identifies a resource within the site. A path can be handled by software rather than a matching disk file. |
| Query | q=moon&sort=title | Passes information to the resource. This example uses named parameters separated by ampersands. |
| Fragment | reviews | Identifies a location or state within the resource, often a section of a page. |
The separators matter: the colon ends the scheme, a question mark begins the query, and a number sign begins the fragment. Sites decide what their paths and query parameters mean. The WHATWG URL Standard defines browser-compatible parsing and the URL API.
Understand relative links
An absolute URL contains its own scheme. A relative reference is interpreted using a base URL. With https://example.org/guides/start.html as the base:
| Reference | Result |
|---|---|
images/map.jpg | https://example.org/guides/images/map.jpg |
/images/map.jpg | https://example.org/images/map.jpg |
../about.html | https://example.org/about.html |
#steps | https://example.org/guides/start.html#steps |
The final slash changes the base: a link resolved against /guides/start/ starts inside that directory-like path. A document can also supply a base element, changing how its relative links resolve. When moving HTML files, check both their links and image paths.
To inspect an address programmatically, use a URL parser rather than splitting the entire string at every slash. This JavaScript example can run in a local script:
const link = new URL('../about.html',
'https://example.org/guides/start.html');
console.log(link.href);
// https://example.org/about.htmlKnow what a change affects
Changing the host sends a request to a different host. Changing a path or query can select a different resource or result. A fragment is handled separately from the HTTP request target: the browser normally requests the page without that fragment, then locates the section. Page scripts can read fragments too. See HTTP target-resource rules.
Percent encoding represents bytes using a percent sign and two hexadecimal digits; %20 commonly represents a space. In form-style query encoding a plus sign can represent a space, while a literal plus is encoded as %2B. Encoding depends on the component and format. Use URL and URLSearchParams APIs when constructing links.
Preserve capitalization in paths and queries: applications may distinguish it. A trailing slash, repeated parameter, or parameter order can also matter to a particular service. Before shortening a shared URL, open the edited version and check that it still reaches the intended view. Avoid including private access tokens or personal search data in public examples.
Check a link before using it
- Inspect the full destination, including the host, rather than relying on the words used as the link label.
- Read the host between the scheme and the path; watch for a username followed by
@. Inhttps://trusted.example@other.example/, the host isother.example. - Check spelling and domain boundaries.
example.org.other.examplebelongs underother.example; the familiar text at its beginning does not establish ownership. - For an account or sensitive action, use a known bookmark or independently obtained official address when the destination is uncertain.
HTTPS protects the connection to the named site. Assess the site's identity and trustworthiness separately. Shortened links and redirects may lead to another URL, so check the final destination too.
Try it: in the library example, which component would change to search for Mars, and which selects the reviews section? Answer: the q query value and the reviews fragment.