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.

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: August 17, 2026