HTML Uniform Resource Locators (URLs)

HTML Uniform Resource Locators (URLs)

A Uniform Resource Locator (URL) is the address used to locate a resource on the internet. In HTML, URLs are used to connect web pages with other pages, images, videos, files, stylesheets, scripts, online services, and many other resources.

For example:

<a href="https://example.com/">Visit Example</a>

In this example, https://example.com/ is the URL. When a visitor clicks the link, the browser uses the URL to find and request the specified resource.

URLs are one of the basic building blocks of the web. Without them, browsers would not have a standard way to identify and access resources across different servers and services.

What Does URL Mean?

URL stands for Uniform Resource Locator.

The three words describe its purpose:

• Uniform means that URLs follow a standardized structure.
• Resource means anything that can be identified or accessed, such as a webpage, image, document, or API endpoint.
• Locator means that the URL provides information about where the resource can be found.

A URL is therefore an address that identifies the location and access method of a resource.

A Simple URL Example

Consider this URL:

https://www.example.com/products/index.html

It contains several parts:

https://www.example.com/products/index.html

Here:

• https is the scheme.
• www.example.com is the host.
• /products/index.html is the path.

A browser uses these parts to determine how and where to request the resource.

URLs in HTML

HTML uses URLs in many different elements and attributes.

For example, an anchor element uses the href attribute:

<a href="https://www.example.com/">Example Website</a>

An image uses the src attribute:

<img src="https://example.com/images/photo.jpg" alt="Example photo">

A stylesheet can be loaded with:

<link rel="stylesheet" href="styles.css">

JavaScript can also be loaded from a URL:

<script src="scripts/main.js"></script>

A form can submit information to a URL:

<form action="/submit" method="post">
    <input type="text" name="name">
    <button type="submit">Submit</button>
</form>

URLs therefore appear throughout HTML documents.

Basic Structure of a URL

A URL can contain several components:

scheme://username:password@host:port/path?query#fragment

Not every URL contains every component.

A more common example is:

https://www.example.com:443/products/item?id=25#details

The components are:

Understanding these components makes it easier to create and troubleshoot HTML links.

URL Scheme

The scheme tells the browser how a resource should be accessed.

The most common web schemes are:

http
https

For example:

<a href="https://example.com">Secure Website</a>

The scheme is followed by a colon and usually two forward slashes:

https://

HTTP

HTTP stands for Hypertext Transfer Protocol.

Example:

http://example.com/

HTTPS

HTTPS stands for Hypertext Transfer Protocol Secure.

Example:

https://example.com/

HTTPS uses encryption through TLS to protect data exchanged between the browser and server. Modern websites generally use HTTPS.

Host

The host identifies the server or network location where the resource is available.

Example:

https://www.example.com/page.html

Here:

www.example.com

is the host.

A host can be a domain name or an IP address.

For example:

https://192.0.2.10/

A domain name is usually easier for people to remember than an IP address.

Domain Name

A domain name is a human-readable name associated with an internet service.

Example:

example.com

A domain can contain multiple labels.

For example:

www.example.com

Here:

• www is a subdomain or host label.
• example is the registered domain name.
• .com is the top-level domain.

Other top-level domains include:

.org
.net
.edu
.gov
.in
.uk

Subdomains

A website can use subdomains to organize different services.

For example:

https://blog.example.com/
https://shop.example.com/
https://support.example.com/

Here, blog, shop, and support are subdomains.

A subdomain can point to the same server as the main website or to a completely different service.

Port

A URL can optionally specify a network port.

Example:

https://example.com:8443/

Here:

8443

is the port number.

Common default ports include:

• HTTP — port 80
• HTTPS — port 443

Because browsers know the default port for common schemes, it is normally unnecessary to write :80 or :443.

For example:

https://example.com/

is normally sufficient instead of:

https://example.com:443/

Path

The path identifies a particular resource or route on a server.

Example:

https://example.com/articles/html/urls.html

The path is:

/articles/html/urls.html

Paths can represent physical files, but on modern websites they often represent application routes generated dynamically.

For example:

https://example.com/products/25

might represent product number 25 even if there is no physical file named 25.

URL Path Segments

A path can contain multiple segments.

Example:

/articles/html/urls

The segments are:

articles
html
urls

Each segment is separated by a forward slash:

/

Path structure depends on how the website or application is designed.

Query String

A URL can contain a query component to provide additional information to a server.

Example:

https://example.com/search?q=html

The query component is:

?q=html

The parameter is:

q=html

A URL can contain multiple parameters:

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

Here there are two parameters:

q=html
page=2

They are separated by an ampersand:

&

Query Parameters in HTML

Query URLs are commonly used in links.

<a href="/search?q=html">Search HTML</a>

When the link is clicked, the browser requests the URL containing the search parameter.

Query parameters are widely used for:

• Search pages
• Filtering
• Sorting
• Pagination
• Tracking
• Product selections
• API requests
• Application settings

URL Fragment

A fragment identifies a particular part of a resource.

It begins with a hash symbol:

#

For example:

https://example.com/article.html#introduction

Here:

#introduction

is the fragment.

HTML commonly uses fragments with element IDs.

<h2 id="introduction">Introduction</h2>

A link can point to that heading:

<a href="#introduction">Go to Introduction</a>

Clicking the link can move the browser to the element with the matching ID.

Absolute URLs

An absolute URL contains enough information to identify a resource independently of the current page.

Example:

<a href="https://www.example.com/about.html">About Us</a>

This is an absolute URL because it includes the scheme and host.

Absolute URLs are useful when linking to:

• Other websites
• External resources
• Canonical URLs
• Social media profiles
• External APIs
• Resources that must be referenced independently of the current page

Relative URLs

A relative URL does not contain the complete address. It is interpreted relative to the current document’s URL.

Example:

<a href="about.html">About Us</a>

If the current page is:

https://example.com/index.html

the browser can resolve:

about.html

as:

https://example.com/about.html

Relative URLs are very common in websites because they make internal links shorter and easier to maintain.

Root-Relative URLs

A root-relative URL begins with /.

Example:

<a href="/about.html">About Us</a>

The path starts from the root of the current origin.

If the website is:

https://example.com/

then:

/about.html

refers to:

https://example.com/about.html

This can be especially useful when pages are located in different directories.

Relative Paths with ../

The notation .. means the parent directory in a relative URL path.

Suppose the current page is:

https://example.com/articles/html/page.html

A link such as:

<a href="../index.html">Home</a>

can refer to:

https://example.com/articles/index.html

Similarly:

<a href="../../index.html">Home</a>

moves up two directory levels.

Current Directory with ./

The notation . represents the current directory.

For example:

<a href="./about.html">About</a>

In many cases, this has the same practical result as:

<a href="about.html">About</a>

The shorter form is generally more common.

URL Encoding

URLs cannot safely contain every character in its literal form. Characters that have special meanings or cannot be represented directly are encoded.

For example, a space can be percent-encoded as:

%20

Therefore:

hello world

can become:

hello%20world

This process is commonly called percent-encoding.

Another example is the & character when it needs to be represented as data inside a URL component.

Percent-Encoding Example

Suppose a search value is:

HTML tutorial

A URL may contain:

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

Here:

%20

represents a space.

Applications should encode URL components appropriately rather than manually guessing which characters need escaping.

Special Characters in HTML URLs

URLs are written inside HTML attributes.

For example:

<a href="https://example.com/search?q=html">Search</a>

When URL data itself contains characters that have special meaning in HTML, appropriate HTML escaping may also be required.

For example, an ampersand can be written as:

<a href="/search?q=html&amp;page=2">Search</a>

The HTML source contains:

&

while the resulting URL query contains:

&

HTML escaping and URL percent-encoding are related to different layers and should not be confused.

URLs and the <a> Element

The <a> element is one of the most important HTML elements for URLs.

Example:

<a href="https://example.com/">Visit Website</a>

The href attribute specifies the destination.

You can link to another page:

<a href="/contact.html">Contact</a>

You can link to a section of the current page:

<a href="#contact">Contact Section</a>

You can link to another website:

<a href="https://www.example.org/">External Website</a>

URLs in Images

The src attribute specifies the image resource.

<img src="images/logo.png" alt="Website logo">

An absolute URL can also be used:

<img src="https://example.com/images/logo.png" alt="Website logo">

For most website-controlled assets, relative or root-relative URLs are often convenient.

URLs in Stylesheets

HTML can load a CSS file using a URL:

<link rel="stylesheet" href="/css/style.css">

The href value identifies the stylesheet resource.

URLs in JavaScript

External JavaScript can be loaded with:

<script src="/js/app.js"></script>

The src attribute contains the URL of the JavaScript resource.

URLs in Forms

The action attribute of a form specifies where form data is submitted.

<form action="/register" method="post">
    <input type="text" name="username">
    <button type="submit">Register</button>
</form>

Here:

/register

is the destination URL.

URLs in <iframe>

An iframe can load another document:

<iframe src="https://example.com/"></iframe>

The src attribute contains the URL of the embedded resource.

For security reasons, websites may restrict whether and how they can be embedded.

URLs in <video> and <audio>

Media elements can also use URLs.

<video controls src="videos/demo.mp4"></video>

An audio example is:

<audio controls src="audio/song.mp3"></audio>

For complex media use cases, HTML may also use nested <source> elements.

URL Resolution

A relative URL must be resolved against a base URL.

For example, if the document URL is:

https://example.com/articles/page.html

and HTML contains:

<a href="next.html">Next</a>

the resulting destination is generally:

https://example.com/articles/next.html

Browsers perform URL resolution according to standardized rules.

The <base> Element

HTML provides the <base> element to define a base URL for relative URLs in a document.

Example:

<head>
    <base href="https://example.com/articles/">
</head>

Then:

<a href="next.html">Next Article</a>

can resolve relative to the specified base URL.

Only one effective <base> element should be used for a document’s base URL, and it can affect many relative URLs. Because of this, it should be used carefully.

URL Case Sensitivity

The scheme and host are generally case-insensitive.

For example:

HTTPS://EXAMPLE.COM/

and:

https://example.com/

identify the same scheme and host.

However, the path may be case-sensitive depending on the server and underlying system.

For example:

/page.html

and:

/Page.html

may be different resources.

Developers should avoid assuming that changing the case of a path is harmless.

Trailing Slashes

These URLs can have different meanings:

https://example.com/about

and:

https://example.com/about/

A web server may treat them as different URLs, redirect one to the other, or serve equivalent content.

Websites should use a consistent URL structure.

URL Protocols Other Than HTTP and HTTPS

Although HTTP and HTTPS are the most common schemes used for web pages, HTML can reference other URL schemes.

Mailto

A mailto: URL can open an email application.

<a href="mailto:hello@example.com">Email Us</a>

Telephone

A tel: URL can provide a telephone link.

<a href="tel:+911234567890">Call Us</a>

Support depends on the user’s device and installed applications.

Data URLs

A data: URL can contain data directly inside a URL.

Example:

<img src="data:image/svg+xml,...">

Data URLs have legitimate uses but can increase document size and may have security or performance implications.

HTTPS and Website Security

URLs beginning with https:// indicate that the connection uses HTTPS.

HTTPS helps protect information while it travels between the browser and server. It also helps authenticate the server through TLS certificates.

However, HTTPS does not automatically mean that a website is trustworthy.

A malicious website can also use HTTPS.

Users should therefore check the domain name and website context instead of relying only on the padlock or https://.

URL Parameters and Security

Query parameters can contain information such as:

https://example.com/product?id=123

Developers should avoid putting sensitive information into URLs whenever possible.

For example, passwords, private tokens, and confidential information should generally not be placed in query strings because URLs may appear in:

• Browser history
• Server logs
• Analytics systems
• Proxy logs
• Screenshots
• Referrer information
• Shared links

Sensitive information should be handled using appropriate secure mechanisms.

URL Validation

Applications that accept URLs from users should validate and handle them carefully.

For example, this link:

<a href="https://example.com">Example</a>

is straightforward.

But applications that allow arbitrary user-provided URLs should consider:

• Allowed schemes
• Trusted domains
• Redirect behavior
• URL parsing
• HTML escaping
• Security policies
• Open redirects
• Malicious URLs

Simply checking whether a string starts with http is not a complete URL validation strategy.

Open Redirects

An open redirect occurs when a website allows attackers to use its URL to redirect users to an arbitrary external destination.

For example, an insecure application might accept:

https://example.com/redirect?url=https://malicious.example/

If the server blindly redirects to the supplied value, attackers may abuse the trusted domain in phishing campaigns.

Applications should validate redirect destinations and use allowlists where appropriate.

URLs and Accessibility

Good URL usage also supports accessibility.

Link text should clearly describe the destination.

Less useful:

<a href="/article.html">Click here</a>

Better:

<a href="/article.html">Read the HTML URL guide</a>

Descriptive link text helps screen-reader users understand links without needing to inspect surrounding content.

Avoid Using Full URLs as Link Text When Unnecessary

This:

<a href="https://example.com/about">https://example.com/about</a>

is sometimes appropriate when showing an actual URL, but ordinary navigation is usually clearer as:

<a href="https://example.com/about">About Us</a>

The visible text should normally communicate what the user will find after clicking.

SEO and URLs

URLs can also affect search-engine understanding and usability.

A clear URL such as:

https://example.com/html/url-guide

is easier to understand than an unnecessarily complicated URL such as:

https://example.com/page.php?id=9382&cat=4&x=72

Search engines can process many types of URLs, including parameterized URLs, but simple and descriptive structures are often easier for users and systems to understand.

Good URL practices include:

• Keep URLs reasonably short.
• Use meaningful words.
• Use hyphens to separate words.
• Avoid unnecessary parameters.
• Use a consistent structure.
• Avoid unnecessary changes to established URLs.
• Redirect changed URLs appropriately.

Hyphens in URLs

Hyphens are commonly used to separate words.

Recommended:

/html-url-guide

Less readable:

/html_url_guide

Also less readable:

/htmlurlguide

A clear URL is easier for users to read and share.

URL Slugs

A slug is the readable part of a URL that identifies a page or resource.

For example:

https://example.com/blog/html-url-guide

The slug may be:

html-url-guide

Many content management systems automatically generate slugs from page titles.

URLs and Canonicalization

A single piece of content may sometimes be accessible through multiple URLs.

For example:

https://example.com/page
https://example.com/page/
https://www.example.com/page

Depending on server configuration, these may represent the same content.

Websites can use redirects and canonical URL signals to communicate their preferred URL.

For example, an HTML document may contain:

<link rel="canonical" href="https://example.com/page">

Canonicalization can help reduce confusion when multiple URLs represent substantially similar content.

Absolute vs Relative URLs: Which Is Better?

Neither type is universally better.

Use an absolute URL when:

• Linking to another website.
• You need a complete, independent URL.
• Generating URLs for external systems.
• Specifying a canonical URL.
• Sharing a complete address.

Use a relative URL when:

• Linking between pages on the same website.
• Referencing local images.
• Referencing local CSS files.
• Referencing local JavaScript files.
• You want links to work across different domains or deployment environments where appropriate.

Example of a relative URL:

<a href="/about.html">About</a>

Example of an absolute URL:

<a href="https://example.com/about.html">About</a>

Common URL Mistakes in HTML

Missing https://

Incorrect:

<a href="www.example.com">Website</a>

Depending on the context, this can be interpreted as a relative URL.

Better:

<a href="https://www.example.com/">Website</a>

Incorrect Path

Incorrect:

<img src="/image/logo.png">

when the actual file is located at:

/images/logo.png

The browser cannot load a resource from the wrong location.

Incorrect Relative Path

Suppose the current page is:

/articles/html/page.html

and the image is located at:

/images/logo.png

A suitable relative path could be:

<img src="../../images/logo.png" alt="Logo">

A root-relative path may be simpler:

<img src="/images/logo.png" alt="Logo">

Forgetting HTML Escaping

When a URL is embedded in HTML and contains an ampersand, HTML escaping may be needed:

<a href="/search?q=html&amp;page=2">Search</a>

Using Spaces in URLs

Avoid putting literal spaces in URLs.

Instead of:

/my page.html

use a suitable encoded or redesigned URL, such as:

/my-page.html

URL vs URI vs URN

These terms are related but are not exactly interchangeable.

URI means Uniform Resource Identifier. It is the broader concept of identifying a resource.

URL is a type of URI that provides a way to locate or access a resource.

URN means Uniform Resource Name. It identifies a resource by name within a particular namespace rather than primarily describing its network location.

In everyday web development, the term URL is the one developers most commonly encounter.

URLs in Modern Web Applications

Modern web applications frequently use URLs as part of application routing.

For example:

https://example.com/dashboard
https://example.com/products/123
https://example.com/users/45/settings

A JavaScript application may interpret these paths and display different views without loading a completely separate HTML document each time.

Even in single-page applications, URLs remain important because they provide navigation, bookmarking, sharing, history, and deep linking.

URLs and APIs

URLs are fundamental to web APIs.

For example:

https://api.example.com/users/123

An application might use this URL to request information about a particular user.

Query parameters are also common:

https://api.example.com/products?category=books&page=2

The exact API behavior depends on the service.

URL Length

There is no single universal maximum URL length defined by HTML itself.

However, browsers, servers, proxies, firewalls, and other systems may impose practical limits.

Extremely long URLs can cause:

• Compatibility problems
• Poor usability
• Difficult sharing
• Logging issues
• Application errors

For this reason, developers should avoid unnecessarily large URLs.

URLs and Bookmarks

URLs allow users to bookmark specific resources.

For example:

https://example.com/tutorial/html-urls

A well-designed URL should remain stable whenever possible.

Changing URLs unnecessarily can break:

• Bookmarks
• Search-engine links
• Social media links
• External references
• Internal links

When a resource moves permanently, an appropriate HTTP redirect can help preserve access.

URLs and Browser History

Browsers store visited URLs in their history.

This is another reason developers should avoid placing sensitive information into query strings.

For example, this is a poor design:

https://example.com/account?password=secret

Sensitive credentials should never be exposed through URLs.

URL Best Practices

Good HTML URL practices include:

1. Use HTTPS for modern websites.
2. Use meaningful and readable URLs.
3. Prefer descriptive paths.
4. Use hyphens between words.
5. Keep URLs reasonably short.
6. Avoid unnecessary query parameters.
7. Use relative URLs for suitable internal resources.
8. Use absolute URLs when a complete external address is needed.
9. Encode URL components correctly.
10. Escape HTML special characters when required.
11. Avoid exposing sensitive information in URLs.
12. Keep URL structures consistent.
13. Use descriptive link text.
14. Test internal links regularly.
15. Redirect old URLs when resources move.
16. Avoid open redirects.
17. Use canonicalization when multiple URLs represent the same content.
18. Make URLs understandable to users.
19. Be careful with user-generated URLs.
20. Consider accessibility when writing link text.

Practical HTML Example

Here is a simple HTML page that demonstrates several types of URLs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML URL Example</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>

    <h1>HTML Uniform Resource Locators</h1>

    <p>
        <a href="https://example.com/">Visit Example</a>
    </p>

    <p>
        <a href="/about.html">About Us</a>
    </p>

    <p>
        <a href="#contact">Go to Contact</a>
    </p>

    <img src="/images/logo.png" alt="Website logo">

    <h2 id="contact">Contact</h2>

    <p>
        <a href="mailto:hello@example.com">Send an email</a>
    </p>

</body>
</html>

This example demonstrates:

• An absolute URL
• A root-relative URL
• A fragment URL
• An image URL
• A mailto URL
• A stylesheet URL

URL Troubleshooting

When a URL does not work, check the following:

1. Check the spelling

Make sure the domain and path are correct.

2. Check the protocol

Verify whether the resource requires:

http://

or:

https://

3. Check the path

Make sure the file or route actually exists.

4. Check relative paths

Determine the current document URL and calculate the relative path from it.

5. Check capitalization

The server may treat uppercase and lowercase paths differently.

6. Check redirects

The old URL may redirect to another location.

7. Check encoding

Special characters may need appropriate percent-encoding.

8. Check HTML escaping

Characters such as & may need HTML escaping inside an attribute.

9. Check server permissions

The resource may exist but may not be publicly accessible.

10. Check browser developer tools

The Network panel can help identify failed requests and HTTP status codes.

Important URL Terms

Key Difference Between URL Types

Why URLs Are Important in HTML

HTML describes the structure of a web document, but URLs connect that document to the wider web.

URLs allow HTML documents to:

• Link to other pages.
• Load images.
• Load CSS.
• Load JavaScript.
• Embed resources.
• Submit forms.
• Link to page sections.
• Connect to APIs.
• Provide downloadable files.
• Support navigation.
• Enable bookmarking and sharing.

Without URL-based addressing, the interconnected nature of the web would not work in the way users expect.

Final Thoughts

HTML Uniform Resource Locators (URLs) are essential for creating connected and functional websites. A URL tells a browser where a resource is located and, through its scheme and other components, how that resource should be accessed.

Understanding schemes, hosts, domains, paths, query parameters, fragments, absolute URLs, relative URLs, encoding, and URL security helps developers create better HTML documents.

A good URL should be clear, stable, secure, accessible, and meaningful. When URLs are designed carefully and used correctly in HTML attributes such as href, src, action, and poster, they provide reliable connections between pages and resources across the web.

For beginners, the most important idea is simple: a URL is the address that tells the browser where a web resource can be found or how it should be accessed. Once this concept is understood, creating links and connecting different parts of a website becomes much easier.