HTML Absolute URLs

An absolute URL is a complete web address that specifies the exact location of a webpage, file, image, or other online resource. Absolute URLs are commonly used when creating links to external websites or resources hosted on a different domain.

In HTML, absolute URLs are usually placed inside the href attribute of an <a> element.

What Is an Absolute URL?

An absolute URL contains all the information required to locate a resource on the web. It normally includes the protocol, domain name, and path.

Example

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

In this example:

  • https:// is the protocol.
  • www.example.com is the domain name.
  • /about.html is the path to the resource.

The complete address is an absolute URL because it provides the full location of the webpage.

If you are new to HTML links, first learn about HTML Links and HTML Link Syntax.

Absolute URL Syntax

The general structure of an absolute URL is:

protocol://domain/path

For example:

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

Here, https:// identifies the protocol, www.example.com identifies the website, and /html/links.html identifies the location of the resource.

Using Absolute URLs in HTML Links

You can use an absolute URL with the <a> element.

<a href="https://www.google.com">
    Visit Google
</a>

When a visitor clicks the link, the browser navigates to the specified website.

The href attribute is an important part of HTML link syntax. You can learn more about it in HTML Link Syntax.

Absolute URLs for External Websites

Absolute URLs are especially useful when linking to external websites.

<a href="https://www.wikipedia.org">
    Visit Wikipedia
</a>

Because the complete domain is provided, the browser knows exactly where to navigate.

For example, a tutorial website can link to documentation, reference websites, educational resources, or other external sources using absolute URLs.

Absolute URLs for Images

Absolute URLs can also be used with the src attribute of an <img> element.

<img src="https://www.example.com/images/html-logo.png"
     alt="HTML Logo">

Here, the image is loaded from the specified external location.

For more information about using images in HTML, see HTML Images.

Absolute URLs vs Relative URLs

An absolute URL contains the complete web address, while a relative URL describes a resource based on the current website or document location.

Absolute URL

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

Relative URL

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

The absolute URL provides the complete location, while the relative URL depends on the current page’s location.

When Should You Use Absolute URLs?

Absolute URLs are commonly used when:

  • Linking to another website
  • Linking to an external resource
  • Referencing resources hosted on another domain
  • Sharing a complete webpage address
  • Creating links that need to work independently of the current page location

For internal website navigation, relative URLs are often more convenient because they do not require the full domain name.

Absolute URLs and Link Targets

An absolute URL can also be combined with the target attribute.

<a href="https://www.example.com"
   target="_blank"
   rel="noopener">
    Visit Example
</a>

Here, the absolute URL specifies the destination, while target="_blank" tells the browser to open it in a new browsing context.

Learn more about this behavior in HTML Link Targets.

Best Practices for Absolute URLs

Always use the correct protocol, domain, and path when writing an absolute URL. Check that external URLs are valid and point to the intended resource.

Use absolute URLs when the complete destination is required, especially for external websites. For internal pages within your own website, relative URLs can often provide a cleaner and easier-to-maintain structure.

Understanding absolute URLs is an important part of learning HTML links and building well-connected webpages.

2 thoughts on “HTML Absolute URLs”

Comments are closed.