HTML Uniform Resource Locators

A Uniform Resource Locator (URL), which is commonly called a web address, is a reference to a web resource specifying its location on the computer network and a mechanism for retrieving it. A URL is a special type of Uniform Resource Identifier (URI), although sometimes these two terms are used interchangeably. In most web browsers, the URL of a web page is displayed above the page in an address bar.

A URL can be composed of words or an Internet Protocol (IP) address. Generally, users enter the name because they are easier to remember than numbers.

This page explains the anatomy of a URL, how absolute and relative URLs behave inside HTML attributes, how the query and fragment parts work, URL encoding, and the schemes you will meet most often.

URL Syntax

The general syntax of a full web address is:

scheme://host:port/path?query#fragment

Anatomy of a URL

According to RFC 3986 — the specification that defines URLs — a URL has the components below. There is no separate "filename" component: a file name is simply the last segment of the path.

A full URL, broken down

Consider this address:

https://www.w3docs.com:443/learn-html/page.html?tab=1#intro

It is made up of these parts:

Absolute vs. Relative URLs

In HTML, a URL can be written in full (absolute) or in a partial form (relative). For a relative URL, the browser fills in the missing parts — scheme, host, and the base directory — from the URL of the current page.

This matters everywhere you reference another resource: in <a href> links, <img src> images, and <link href> stylesheets.

Assume the current page is https://example.com/learn-html/page.html:

<!-- Absolute URL: includes the scheme and host -->
<a href="https://example.com/page">External page</a>

<!-- Root-relative: starts at the site root -->
<img src="/images/logo.png" alt="Logo" />

<!-- Relative: relative to the current page's folder -->
<link rel="stylesheet" href="../css/style.css" />

Use relative URLs to link within your own site (they keep working if the site moves to a new domain) and absolute URLs to point to external resources. See HTML Links for more on linking.

The Query Component

The query string comes after a ? and carries data to the resource as key=value pairs. Multiple parameters are joined with &:

https://www.w3docs.com/search?q=html&page=2

Here q=html and page=2 are two separate parameters. Servers (and JavaScript) read these values to decide what to return — for example, a search term and a page number.

The Fragment (Anchor)

The fragment comes after a # and points to a specific part of a page. The browser scrolls to the element whose id matches the fragment. It is handled entirely in the browser and is never sent to the server.

<!-- Links to the element with id="section2" on the same page -->
<a href="#section2">Jump to Section 2</a>

<h2 id="section2">Section 2</h2>

URL Encoding

URLs can be transmitted over the Internet only using the ASCII character set. If a URL contains characters outside that set — or characters that have a special meaning in a URL — those characters must be encoded.

In URL encoding (also called percent-encoding) a character is replaced with a % followed by its two-digit hexadecimal value. URLs cannot contain spaces, so a space becomes %20 (or, in query strings, a + sign):

Before:  https://www.w3docs.com/search?q=hello world
After:   https://www.w3docs.com/search?q=hello%20world

Reserved characters such as ?, &, =, #, and / carry structural meaning in a URL, so when they appear inside a value they must be percent-encoded too (for example & becomes %26). Some common replacements:

Common Schemes

The scheme tells the browser which protocol or service to use. The most common are below.

<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us</a>

For security reasons modern browsers restrict the ftp: and file: schemes: ftp: support has been removed from most browsers, and file: links to local files generally do not work from a page served over http/https.

Practice