HTML Uniform Resource Locators (URL)

A URL is a web address that identifies and locates resources such as HTML pages, images, and files. Each URL follows a specific format. This format lets browsers request resources from servers. Web developers must understand URL parts to build and troubleshoot links effectively.

Learning Outcomes

After reading this tutorial, you will:

Understand URL structure and components: scheme, domain, path, query string, and fragment
Use URL encoding to transmit special characters safely
Identify differences among HTTP, HTTPS, and FTP schemes
Create URLs for web pages, dynamic content, and file transfers

Structure of a URL

A URL has these parts:

scheme://[user:password@]domain:port/path?query_string#fragment

Scheme: The protocol for accessing the resource, such as http, https, or ftp.
Domain: The server address, for example www.example.com.
Port: An optional server port, for example :80.
Path: The location of the file on the server, for example /index.html.
Query String: Parameters for dynamic content, for example ?id=123&category=html.
Fragment: A link to a section within the resource, for example #section1.

URL Example:

https://www.sitepoint.com/html/

https is the scheme.
www.sitepoint.com is the domain.
/html/ is the path.

Different Parts of a URL

Each part of the URL plays an important role in locating and accessing resources on the web. Let’s break them down:

Scheme (Protocol)

The scheme defines the protocol for accessing a resource. Common schemes include:

HTTP (http://) accesses regular web pages.
HTTPS (https://) encrypts data during transfer.
FTP (ftp://) transfers files between client and server.
mailto (mailto:) opens the default email client to compose a message.

Domain

The domain names the server that hosts the resource.

Example: in https://www.sitepoint.com/html/, www.sitepoint.com is the domain.

Path

The path locates the resource on the server.

Example: in https://www.sitepoint.com/html/, /html/ is the path to the HTML page.

Query String

A query string starts with ? and sends parameters to the server.

Example:

https://www.example.com/products?category=html&price=low

Here, category=html&price=low filters products by category and price.

Fragment

A fragment identifier, marked by a #, refers to a specific section within the resource, often used in web pages to scroll to a particular section. For instance:

https://www.example.com/about#team

The fragment #team would scroll the page to the "Team" section.

URL Encoding

URLs must adhere to a strict format to ensure proper transmission over the web. URL encoding (also known as percent encoding) replaces unsafe or reserved characters with a % followed by a two-digit hexadecimal code.

For example:

A space character is encoded as %20.
A question mark (?) is encoded as %3F.

Why is URL Encoding Needed?

Since URLs can only use certain characters, encoding is necessary for characters like spaces, punctuation marks, or any other non-ASCII characters. For instance, the space in "My Page" would be encoded as My%20Page to ensure it is transmitted correctly.

Example in web development:

https://www.sitepoint.com/search?q=HTML%20tutorial

Here, the space between "HTML" and "tutorial" is replaced with %20.

FAQs on HTML Uniform Resource Locators (URL)

What does %20 mean in a URL?

In URL encoding, %20 represents a space. Since spaces are not allowed in URLs, they are encoded as %20 to ensure the URL is transmitted correctly.

What are three examples of URLs?

HTTP: http://www.example.com/about

Used for non-encrypted web pages.
HTTPS: https://www.sitepoint.com/html/

Encrypts data during transfer.
FTP: ftp://ftp.example.com/file.zip

Transfers files between client and server.

What does `%26` mean in a URL?

%26 means an ampersand (&). Encoding & lets you include it inside a query value.

Example:

https://www.example.com/search?query=HTML%26CSS

Here, HTML%26CSS sends “HTML&CSS” as the query.

What Does “Subfolder” Mean in HTML?

A subfolder (also called a subdirectory) is a folder within your website’s main directory that helps organize files and pages. In a URL like sitepoint.com/blog/article.html, “blog” is a subfolder. It doesn’t change HTML itself but reflects how your site’s files are structured on the server.

What Does “Subdomain” Mean in HTML?

A subdomain is a prefix to your main domain that points to a separate section of your site or a different server. In a URL like shop.sitepoints.com, “shop” is the subdomain. It’s configured at the DNS/server level rather than in HTML, but you can link to it just like any other URL.