The differences between URL parameters and fragments

  John Mwaniki /    Updated on 07 Jul 2024

In this article, we will cover what URL parameters and fragments are, how they work, what they are used for, and how they differ from each other.

Uniform Resource Locator (URL) is a unique address of a resource (eg. a web page or file) on a computer network (mostly Internet). The URL specifies the location of the resource on the network, and the mechanism of retrieving it.

These resources could be a web page or a file such as an image, pdf file, video, etc.

Structure of a URL

A URL generally comprises 3 main parts which include the protocol, the domain name, and the file path.

The protocol (https://) indicates the access mechanism for the resource, ie how it should be retrieved. Other widely used protocols include http:// (for web but unsecured), ftp: (for handling file transfers), and mailto: (for opening the default mail client).

The domain name (www.webdevsplanet.com) is the name of the host computer on which the file is located. It can be the website's domain name or its IP address. The "www" is optional based on your preference. The domain name can also comprise the subdomain eg blog.example.com.

The path (/path/filename) specifies the name of the file and its location on the host computer, i.e relative path to the file from the homepage or the root directory of that domain.

In the path part, some URLs may have additional details to pass some information or to act as a shortcut to a section within the resource. These may include parameters or fragments.

URL Parameters

URL parameters (also known as “query strings”) are a way to pass some information to a resource (eg. a web page) via its URL. Parameters are added to the end of a URL after a question mark "?" and passed as key(parameter) value pairs delimited by the equal sign "=". If multiple parameters are passed, then they are separated by the ampersand "&" symbol.

Example

https://www.example.com/path?param1=value1&param2=value2

The passed information is said to be shared via an HTTP GET request. In PHP, this data is collected using the $_GET superglobal variable. The $_GET variable comprises an associative array of all the query string data where the parameters are the array keys and parameter values the array values.

<?php
//This php file is loaded via https://www.example.com/path?fname=John&lname=Doe
$fname = $_GET["fname"];
$lname = $_GET["lname"];
echo "First Name: $fname <br>";
echo "Last Name: $lname";

Output:

First Name: John
Last Name: Doe

A modern approach for URLs (known as SEO-friendly or clean URLs) is recommended and now more and more URLs are taking a different format from the above through a technique called URL routing.

URL fragments

There is a convention for URLs called "fragment URLs" used to refer to anchors within an HTML page.

Example

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

In the above example is the "about us" page of a website with the URL "https://www.example.com/about-us". Inside the page, there is a "team" section whose "id" attribute's value is "team". The "#team" in the above URL points to the team section, ie on loading the URL on the browser, the page will scroll down automatically to bring the team section to the view.

From the example, "#team" is the fragment while "team" is the fragment identifier.

Any URL that contains a hash # character is referred to as a fragment URL. The URL portion to the left of the # uniquely identifies a resource (web page) and the portion on its right is called the fragment identifier and is used to specify a location within the resource.

In web pages, the browser looks for an element with an id attribute matching the fragment and scrolls to it.

URL fragments are mostly used on large web pages. Such pages are subdivided into various sections with fragment identifiers as their id attribute values. To easily navigate through these sections, links are created with fragments as their href values to act as shortcuts for the sections. On clicking these links, one is taken to the respective section on the page.

On accessing such a page via a fragment URL, it automatically scrolls to the section associated with the fragment.

If you manually change the fragment identifier on the URL in the browser address bar and hit enter, the page doesn't get reloaded. The browser only scrolls the page to the new location.

However, it gets recorded in the browser's history so that on clicking the Back button it goes go back to the original location on the page.

Differences between URL parameters and Fragments