HTML href Attribute

The HTML href attribute specifies the URL associated with certain HTML elements. It is most commonly used to define the destination of hyperlinks, but it also identifies external resources and establishes a document's base URL.

Syntax

The href attribute is followed by a URL that identifies the destination or resource associated with the element.

<a href="URL">Link text</a>

For example, an anchor can link to another page:

<a href="/articles/web-design.html">Web Design Article</a>

Attribute Value

The href attribute accepts a URL. Depending on the element and purpose of the link, the value can identify another page, a resource, a location within a document, or another URL-based destination.

Value	Description
URL	Specifies the destination or resource associated with the element.

A URL can be absolute, relative, root-relative, or a fragment reference depending on the context.

Elements That Use the href Attribute

In HTML, the href attribute is used with the <a>, <area>, <base>, and <link> elements.

Element	Description
`<a>`	Specifies the destination of a hyperlink.
`<area>`	Specifies the destination of a clickable region in an image map.
`<base>`	Specifies the base URL used to resolve relative URLs in the document.
`<link>`	Specifies the location of an external resource or related document.

Using the href Attribute

The most common use of href is with the <a> element to create a hyperlink.

<a href="/articles/web-design.html">Read the Web Design Article</a>

Browser Result

Read the Web Design Article

When the user activates the link, the browser navigates to the URL specified by href.

An <a> element without an href attribute is not a hyperlink.

URL Types

The href attribute can use several forms of URLs depending on where the destination is located.

Type	Example	Description
Absolute URL	`https://www.example-web.site/articles/web-design.html`	Provides the complete address of a resource.
Root-relative URL	`/articles/web-design.html`	Begins at the root directory of the current website.
Relative URL	`articles/web-design.html`	Is resolved relative to the document's base URL.
Fragment	`#contact`	Targets an element within the current document.
Email URL	`mailto:info@example-web.site`	Creates a link that can open an email application.
Telephone URL	`tel:+15551234567`	Creates a link for initiating a telephone call on supported devices.

Fragment Links

A fragment URL begins with # and targets an element whose id matches the fragment identifier.

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

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

Fragment identifiers can also be added to another page's URL to navigate directly to a particular section of that document.

<a href="/tutorial-pages/jump-links.html#section-two">Go to Section Two</a>

href with <base> and <link>

On a <base> element, href establishes the base URL used to resolve relative URLs throughout the document.

<base href="https://www.example-web.site/">

On a <link> element, href identifies the external resource or related document.

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

The meaning of the referenced resource is determined by other attributes, particularly the rel attribute.

Common Mistakes

Do not confuse href with src. The href attribute references a destination or related resource on elements that support it, while src is used by elements that embed or load a resource as part of their content.

<!-- Correct hyperlink -->
<a href="/articles/web-design.html">Web Design Article</a>

<!-- Correct image source -->
<img src="/img/logo.png" alt="Example logo">

Do not use a filesystem path from your own computer as a website URL.

<!-- Incorrect for a published website -->
<a href="C:\Users\Name\Documents\page.html">Page</a>

<!-- Correct -->
<a href="/articles/web-design.html">Page</a>

When using fragment links, make sure the fragment identifier corresponds to an existing id in the destination document.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The href attribute and its established HTML uses are widely supported in current core browsers. Individual URL schemes and newer URL features can have their own compatibility requirements.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the href Attribute

The example contains several hyperlinks using different href values. Change the destinations in the editor to experiment with absolute URLs, root-relative URLs, and fragment links.

Play in Editor

Summary

The HTML href attribute specifies a URL associated with an <a>, <area>, <base>, or <link> element. It can define hyperlink destinations, clickable image-map areas, a document's base URL, and the locations of external resources. Depending on the context, the value can be an absolute URL, relative URL, root-relative URL, fragment reference, or another supported URL scheme.