URL: What It Is and How It Works

URL: Uniform Resource Locator

A URL (Uniform Resource Locator) is the address you use to access any resource on the web. When you type an address into your browser, click a link, or make an API call, you are using a URL. It tells the browser which protocol to use, which server to connect to, and which specific page, file, or data to request. Every web page, image, video, API endpoint, stylesheet, and downloadable file on the internet has a unique URL that distinguishes it from every other resource.

URLs are not just for browsers. They are used by command-line tools like curl, by server-side code making HTTP requests, by mobile applications communicating with APIs, and by search engine crawlers discovering and indexing web content. Understanding URL structure is foundational for web development, API design, SEO, and debugging network issues.

Anatomy of a URL

A URL is made up of several distinct components, each serving a specific purpose. Not all components are required in every URL, but together they provide everything a client needs to locate and request any resource on the internet.

https://www.example.com:443/tutorial/url?ref=home&lang=en#anatomy

Protocol:  https://
Subdomain: www
Domain:    example.com
Port:      :443
Path:      /tutorial/url
Query:     ?ref=home&lang=en
Fragment:  #anatomy

How Browsers Process URLs

When you enter a URL or click a link, the browser performs a precise sequence of steps to turn that address into a visible page. Understanding this sequence explains why some pages load instantly from cache while others require multiple network round-trips.

1. The browser parses the URL to extract each component: protocol, subdomain, domain, port, path, query string, and fragment
2. The browser checks its local cache using HTTP caching rules to determine whether a valid cached response for this URL already exists
3. If not cached, the browser performs a DNS lookup to resolve the domain name into an IP address, checking its own DNS cache before querying a resolver
4. The browser opens a TCP connection to the resolved IP address on the specified port, defaulting to 443 for HTTPS and 80 for HTTP
5. For HTTPS URLs, a TLS handshake is performed to negotiate encryption before any HTTP data is exchanged
6. The browser sends an HTTP request containing the path and query string from the URL, along with request headers
7. The server processes the request using the path and query string to locate or generate the appropriate response
8. The browser renders the received content and, if a fragment identifier is present, scrolls to the element with the matching id

Absolute vs Relative URLs

URLs come in two forms that serve different purposes. The choice between them affects portability, maintainability, and how your links behave when your site is accessed from different domains or moved between environments.

An absolute URL contains the full address including the protocol and domain name. It uniquely identifies a resource on the internet regardless of where the linking page is located. Absolute URLs are required when linking to external sites or when specifying canonical URLs and open graph metadata.

A relative URL specifies only the path, omitting the protocol and domain. The browser resolves it relative to the current page's URL. Relative URLs are preferred for internal links within a website because they continue to work correctly if the site is deployed to a different domain or accessed in a development environment.

<!-- Absolute URL: works from anywhere, links to a specific domain -->
<a href="https://example.com/tutorial/url">URL Tutorial</a>

<!-- Root-relative URL: path from the domain root, works on the same site -->
<a href="/tutorial/url">URL Tutorial</a>

<!-- Relative URL: path relative to the current page's directory -->
<a href="url">URL Tutorial</a>

<!-- Protocol-relative URL: uses the same protocol as the current page -->
<a href="//example.com/tutorial/url">URL Tutorial</a>

URL Encoding

URLs can only contain a specific set of safe characters defined by RFC 3986. Characters that have special meaning in URL syntax, such as &, ?, and =, must be percent-encoded when they appear as data values rather than structural delimiters. Non-ASCII characters such as accented letters, Chinese characters, and emoji must also be percent-encoded because URLs are restricted to the ASCII character set.

Percent-encoding replaces each unsafe byte with a percent sign followed by two hexadecimal digits representing the byte value. A space becomes %20, an ampersand becomes %26, and a forward slash within a value becomes %2F.

Original:  /search?q=what is a URL&filter=type/tutorial
Encoded:   /search?q=what%20is%20a%20URL&filter=type%2Ftutorial

// encodeURIComponent encodes a single value for use within a URL
const query = 'coffee & tea';
const encoded = encodeURIComponent(query);
console.log(encoded); // "coffee%20%26%20tea"

const url = `/search?q=${encoded}`;
console.log(url); // "/search?q=coffee%20%26%20tea"

// encodeURI encodes a complete URL but leaves structural characters intact
const fullUrl = encodeURI('https://example.com/search?q=hello world');
console.log(fullUrl); // "https://example.com/search?q=hello%20world"

// decodeURIComponent reverses the encoding
console.log(decodeURIComponent('coffee%20%26%20tea')); // "coffee & tea"

// The URL constructor parses and encodes automatically
const parsedUrl = new URL('https://example.com/search?q=hello world');
console.log(parsedUrl.href); // "https://example.com/search?q=hello%20world"

Working with URLs in JavaScript

The built-in URL constructor provides a clean API for parsing, constructing, and manipulating URLs in JavaScript without manual string handling. It handles encoding automatically and exposes each URL component as a readable and writable property.

const url = new URL('https://example.com:8080/tutorial/url?lang=en&page=2#anatomy');

console.log(url.protocol);  // "https:"
console.log(url.hostname);  // "example.com"
console.log(url.port);      // "8080"
console.log(url.pathname);  // "/tutorial/url"
console.log(url.search);    // "?lang=en&page=2"
console.log(url.hash);      // "#anatomy"

// Read individual query parameters
console.log(url.searchParams.get('lang'));   // "en"
console.log(url.searchParams.get('page'));   // "2"

// Modify query parameters
url.searchParams.set('page', '3');
url.searchParams.append('sort', 'date');
console.log(url.href);
// "https://example.com:8080/tutorial/url?lang=en&page=3&sort=date#anatomy"

// Build a URL from parts
const apiUrl = new URL('/api/users', 'https://example.com');
apiUrl.searchParams.set('role', 'admin');
console.log(apiUrl.href); // "https://example.com/api/users?role=admin"

Common URL Patterns in Web Development

URL Best Practices

Well-designed URLs are readable, predictable, and stable. They improve user experience, make debugging easier, and have a positive impact on search engine optimisation.

• Use lowercase letters throughout: URLs are case-sensitive on Linux servers, meaning /Tutorial/URL and /tutorial/url are different paths. Using lowercase consistently prevents duplicate content and broken links.
• Use hyphens to separate words: Search engines and humans read /what-is-a-url more easily than /what_is_a_url or /whatisaurl. Hyphens are the standard word separator for URL paths.
• Keep URLs descriptive but concise: A URL should give a clear indication of the page's content without being unnecessarily long. Avoid including stop words, session IDs, or auto-generated numbers in publicly visible URLs where possible.
• Use nouns for resource paths, not verbs: REST API paths should identify resources such as /users/42 rather than describing actions such as /getUser?id=42. The HTTP method conveys the action.
• Avoid changing URLs for published content: Once a URL is indexed by search engines and linked from other sites, changing it breaks those links and loses the SEO value they carry. If URLs must change, set up permanent 301 redirects from the old addresses to the new ones.
• Always use HTTPS: URLs beginning with https:// encrypt the connection, protect user data, are required for modern browser features, and are preferred by search engines.
• Remove tracking parameters before sharing: URLs shared from social media, email campaigns, and advertising platforms often carry tracking parameters such as utm_source, fbclid, and gclid that expose information about where a link came from. Stripping these before sharing or saving a URL produces a cleaner, shorter address that contains only the information needed to reach the resource.

Why Clean URLs Matter

In practice, URLs you encounter while browsing are rarely clean. Every link you click from a search result, social media post, or marketing email is likely to carry extra parameters appended by analytics platforms, advertising networks, and affiliate systems. A URL that looks like this:

https://example.com/article/how-dns-works
  ?utm_source=twitter
  &utm_medium=social
  &utm_campaign=spring_launch
  &fbclid=IwAR2xK9mP3nQs
  &ref=homepage
  &sessionid=abc123xyz

contains the same content as:

https://example.com/article/how-dns-works

The extra parameters serve tracking purposes for the originating platform but add no value to the reader. They inflate link length, expose behavioural data to third parties when shared further, and can cause privacy issues when copied into emails or messages. Sharing or bookmarking the clean version is better for privacy, readability, and portability.

Common tracking parameters that are safe to remove include utm_source, utm_medium, utm_campaign, utm_content, utm_term (Google Analytics UTM parameters), fbclid (Facebook click identifier), gclid (Google Ads click identifier), msclkid (Microsoft Ads click identifier), ref and referrer (referral tracking), and various session and affiliate identifiers appended by e-commerce platforms.

Advanced URL Cleaner

Advanced URL Cleaner is a browser extension that automatically strips tracking parameters, affiliate tags, and unnecessary query strings from URLs as you browse, giving you clean links ready to share without manual editing. It processes URLs locally in your browser without sending your data anywhere, works on every site automatically, and is available for both Chrome and Firefox.

• Removes UTM parameters added by Google Analytics, Mailchimp, HubSpot, and other marketing platforms
• Strips click identifiers including fbclid, gclid, and msclkid that expose your browsing source to anyone you share the link with
• Cleans affiliate and referral tags that e-commerce and content platforms append to track revenue attribution
• Works locally with a minimal permission scope, meaning your URLs are never sent to a remote server for processing
• Integrates directly into the toolbar for immediate one-click access within any link-heavy workflow

URL vs URI vs URN

These three terms are related and frequently confused. They form a hierarchy where URI is the broadest category and URL and URN are specific types within it.

In everyday web development, URL is the term used almost exclusively. URI appears in technical specifications, HTTP headers such as Content-Location, and framework documentation. For practical purposes, URL and URI are interchangeable in most conversations about web addresses.

Frequently Asked Questions

1. What is the difference between a URL and a domain name?
   A domain name is one component within a URL. It identifies the server, for example example.com, but on its own it cannot tell a browser which protocol to use, which port to connect to, or which specific page to request. A URL is the complete address that includes the protocol, domain, path, query string, and fragment. The domain name alone is enough for a human to understand which website is meant, but a browser needs the full URL to locate and retrieve a specific resource.
2. Why do some URLs have www and others do not?
   The www subdomain is a convention from the early web that originally indicated a server dedicated to web traffic, as distinct from other services like ftp or mail. Today it is entirely optional and both https://example.com and https://www.example.com can serve the same website. Most sites configure one version as canonical and redirect the other to it with a 301 permanent redirect to avoid duplicate content in search engine indexes and ensure links are consistent.
3. What is a query string used for?
   A query string passes additional data to the server as key-value pairs appended to the URL after a question mark. It is commonly used for search terms, pagination parameters, filter criteria, UTM tracking parameters for marketing analytics, and API request parameters. The server reads these values and uses them to determine what content to return. Query strings are visible in the URL and logged by servers, so sensitive data like passwords should never be placed in a query string.
4. Are URLs case-sensitive?
   The scheme and domain name are case-insensitive by specification, so HTTPS://EXAMPLE.COM and https://example.com are equivalent. The path, query string, and fragment may be case-sensitive depending on the server's operating system and configuration. Linux servers treat paths as case-sensitive while Windows servers do not. Using lowercase for all URL paths consistently is the strongly recommended practice to avoid confusion, broken links, and duplicate content issues in search engines.
5. What is the difference between the path and the query string?
   The path identifies the resource being requested and is part of the resource's identity. The query string provides additional parameters that modify how the server responds to a request at a given path. In REST API design, the path identifies what you are accessing such as /users/42, while the query string controls response formatting such as ?fields=name,email. For public-facing pages, paths are used for primary navigation structure and query strings for filters, sorting, and pagination.

Conclusion

URLs are the addressing system of the web, uniquely identifying every resource from web pages and images to API endpoints and file downloads. Understanding each component of a URL, how browsers process them, the difference between absolute and relative forms, and how to encode and manipulate them in JavaScript gives you a foundation that applies to every aspect of web development. Clean, predictable, and stable URLs improve user experience, make debugging straightforward, and contribute positively to search engine visibility. If you share links regularly, Advanced URL Cleaner removes tracking parameters automatically so every link you share is clean, short, and free of unwanted data. Continue learning with domain names, HTTP methods, HTTP headers, and REST APIs to build a complete picture of how the web addresses and accesses its resources.