Uniform Resource Locator (URL)

A Uniform Resource Locator (URL) is a type of URI identifying a resource by its location on a network. Also known as a web address, a URL is what users type into a browser address bar, follow as a hyperlink, or store as a bookmark.

Table of Contents

Usage

A URL is a URI with a scheme and enough information to locate the resource. The most common schemes are http and HTTPS, but ftp, mailto, and data are valid URL schemes as well.

Because a URL is a URI, the full generic syntax applies:

scheme ":" ["//" authority] path ["?" query] ["#" fragment]

Components

Component Example value Required
Scheme https Yes
Authority www.example.re Typical
Port 443 No
Path /docs/guide Yes
Query q=search&page=2 No
Fragment section-3 No

The scheme determines the default port (80 for HTTP, 443 for HTTPS). The authority contains the host and an optional port. The path identifies a specific resource on the host. The query passes parameters, and the fragment points to a secondary resource handled entirely on the client side.

Relative URLs

A URL reference with no scheme resolves against a base URL. This is common in HTML where href and src attributes reference resources relative to the current page.

/images/logo.png
../styles/main.css
?page=2
#footer

Each form resolves differently against the base URL. A leading / starts from the authority root, ../ moves up one path segment, a bare ? replaces the query, and a bare # sets only the fragment.

Encoding

Characters outside the allowed ASCII set are represented using Percent-Encoding. Spaces in a query string are often encoded as + in the application/x-www-form-urlencoded format, or as %20 in path segments.

Example

A simple URL with scheme and authority, no explicit path or query:

https://www.example.re

This URL points to a resource using the HTTPS scheme, with the authority www.example.re. The path defaults to /.

A URL with a path, query, and fragment:

https://example.re/search?q=uri&lang=en#results

The path /search identifies the resource. The query string passes two parameters (q and lang). The fragment results directs the client to a specific section of the response.

A mailto URL triggering an email client:

mailto:info@example.re?subject=Hello

The mailto scheme has no authority. The path is the email address, and the query pre-fills the subject line.

URL API

The URL JavaScript API, the feature behind the Baseline note above, parses and builds URLs with the same component model this article describes. new URL() splits an address into scheme, host, port, path, query, and fragment properties, URL.canParse() answers validity without throwing, and URLSearchParams reads and edits the query string without manual string handling.

const u = new URL("https://example.re/docs?page=2");
u.searchParams.set("page", "3");
u.hash = "#syntax";
// https://example.re/docs?page=3#syntax

Relative resolution works through the second argument: new URL("../images/logo.png", u) resolves against the base exactly as a browser resolves a relative link in a page.

URLPattern API

The URLPattern API, defined in the WHATWG URL Pattern Standard, provides a browser-native way to match URLs against patterns and extract dynamic segments. Previously, routing logic in JavaScript relied on regular expressions or third-party libraries. URLPattern accepts a pattern object matching against individual URL components and returns matches with named groups.

The API exposes each URL component as a matchable property:

Property URL component
protocol Scheme (https, ftp)
username Userinfo username
password Userinfo password
hostname Host (example.re)
port Port number (443)
pathname Path (/products/42)
search Query string (q=test)
hash Fragment (section-1)

Each property holds a pattern string supporting named groups (:id), wildcards (*), regex segments (([0-9]+)), and modifiers for optional (?) and repeated (+) matches. The test() method returns a boolean, and exec() returns an object with matched groups for each component.

const pattern = new URLPattern({
  pathname: "/products/:id",
  hostname: "*.example.re"
});

pattern.test("https://shop.example.re/products/42");
// true

const result = pattern.exec(
  "https://shop.example.re/products/42"
);
// result.pathname.groups.id === "42"

See also

Last updated: September 21, 2026