HTML Absolute URLs Tutorial - Complete Web Addresses

Understanding HTML Absolute URLs

An absolute URL provides the complete address needed to locate a resource on the web. It includes the URL scheme, such as https://, the domain name, and any path needed to reach the resource.

Absolute URLs are commonly used when linking to pages or resources on another website because the browser needs the complete address rather than a path based on the current website.

Absolute URL Syntax

An absolute URL contains a complete web address rather than a path that depends on the location of the current document.

<a href="https://www.example-web.site/">Visit Example Web</a>

Because the href value includes the scheme and domain name, the browser can locate the destination regardless of where the page containing the link is stored.

Parts of an Absolute URL

An absolute URL can contain several parts that identify how and where a resource should be located.

https://www.example-web.site/html5/tutorials/index.html

In this example, https:// is the scheme, www.example-web.site is the host name, and /html5/tutorials/index.html is the path to the resource.

Absolute URLs can also contain additional components, such as a port number, query string, or fragment identifier, when they are needed to identify a particular resource or location.

Linking to Another Website

Absolute URLs are normally used when creating hyperlinks to resources on another website. Since the destination is outside the current website, the complete address identifies where the browser should go.

<a href="https://www.example-web.site/">Visit Example Web</a>

The link remains the same regardless of which directory contains the HTML document because its destination does not depend on the current page's location.

Absolute URLs with Paths

An absolute URL can point to a specific page or resource by including its path after the domain name.

<a href="https://www.example-web.site/tutorials/html.html">HTML Tutorial</a>

The browser connects to www.example-web.site and then requests the resource located at /tutorials/html.html.

Absolute URL Example

The following example demonstrates hyperlinks that use complete web addresses.

<h2>External Resources</h2>

<p><a href="https://www.example-web.site/">Example Web Home</a></p>

<p><a href="https://www.example-web.site/tutorials/">Example Web Tutorials</a></p>

<p><a href="https://www.example-web.site/contact.html">Example Web Contact</a></p>

Try changing the absolute URLs in the editor and notice that each destination includes enough information to identify the website and requested resource.

Play in Editor

Absolute vs Relative URLs

An absolute URL contains the complete web address, while a relative URL identifies a destination based on the location of the current document.

<!-- Absolute URL -->
<a href="https://www.example-web.site/contact.html">Contact Us</a>

<!-- Relative URL -->
<a href="contact.html">Contact Us</a>

Absolute URLs can locate a resource without relying on the current document's location. Relative URLs are useful for resources within the same website when the path should be based on the current page.

Absolute vs Root-Relative URLs

Absolute and root-relative URLs can both identify the same internal resource, but they begin from different points. An absolute URL includes the scheme and domain, while a root-relative URL begins with the website root.

<!-- Absolute URL -->
<a href="https://www.example-web.site/images/logo.png">Logo</a>

<!-- Root-relative URL -->
<a href="/images/logo.png">Logo</a>

For links within the same website, a root-relative URL can avoid repeating the scheme and domain name. Absolute URLs are generally necessary when linking to another website.

Absolute URL Best Practices

Use absolute URLs when linking to resources on another website.
Include the complete scheme and host name in an absolute web URL.
Use https:// when the destination is available securely over HTTPS.
Include the complete path when linking directly to a specific page or resource.
Use relative or root-relative URLs when they are more appropriate for internal website links.
Check external links periodically because resources on other websites can be moved or removed.
Write descriptive link text rather than displaying a long URL when the address itself is not useful to the reader.

Summary

An absolute URL provides the complete address of a web resource, including its scheme, host name, and any required path. Absolute URLs are especially important for links to other websites because they identify the destination independently of the location of the current HTML document.