href (HTML attribute)

Share this article

Description

The href defines the document to which the link leads. This may be a web page in the same directory, a page somewhere else on the same server, a location within the current page, or a web page—or any another kind of document—stored on another server. The example shows a link between two documents in the same directory, but if the cake list document was in a directory that’s one level higher than the referencing document, the syntax would be as follows:
<a href="../cakes.html">lovely range of cakes</a>
Here, ../ equates to the instruction, “move up one directory in the hierarchy.” You can also reference a document relative to the web site’s root (the file or folder after the domain name):
<a href="/cakes.html">lovely range of cakes</a> 
This link basically instructs the browser to “link to the document cakes.html that can be found in www.mydomain.com/.” This is a very handy way of referencing documents, as you could move the document containing the link to any location on the file system without breaking the link. If you’re linking to a document (of whatever type) that’s held on another server, you’d express the href using a complete URI, like so:
<a href="http://www.cakebrothers.com/cakes.html">lovely range of cakes</a>
In a link to another section within the same page, the destination is identified in the href attribute by a hash symbol combined with the id attribute of the destination. This notation is known as a fragment identifier, and is shown below: Note these points from the example above: The href
attribute is repeated in the second a element. This isn’t a mistake—it’s there because without it, Internet Explorer users who navigate to the destination would find that, although the document had moved to the correct position on the screen, the focus will not have shifted. If the user were to tab to the next link, the focus would move to the link immediately after the link the user had selected further up the page, rather than the next link after the point in the page at which the references are included. It’s possible to simply apply an id attribute to another element—for example, <h3 id="refs">References</h3>—and some browsers will allow you to activate a link and jump to that point. However, not all browsers allow this, the notable case being Internet Explorer. That’s why we need the seemingly superfluous second a element as an anchor, which is wrapped around the text inside the h3. The syntax for this simplified (but not IE-friendly) markup is shown below:
<p>You can check the facts by reading the
  <a href="#refs">references at the end of this article</a></p>
⋮
<h3 id="refs">References</h3> 
In your own work, you may spot examples that include both a name and id inside the anchor a element. This approach is designed to ensure that the link works in older browsers which may not allow the user to jump from one part of a document to another if the name attribute isn’t present. However, the last of the common browsers that weren’t able to link to a section of a page in this way was Netscape 4, which, thankfully, is now almost completely obsolete. Also, note that in HTML 5 the name attribute has been removed, so it’s a good idea to break the habit of using name. In addition to links to documents (such as web pages or other document types), the href attribute may specify a different protocol, including:
  • ftp typed as <a href="ftp://someftpserver.com/">Browse the FTP server</a>, which will open a connection to an FTP server
  • mailto typed as <a href="mailto:mrwhatever@somedomain.com">Email me!</a>, which will trigger an email client to open and create a new message whose To address matches whatever appears after the mailto: protocol (in this case, an email to mrwhatever@somedomain.com)

Value

This attribute takes as its value the location of the destination document relative to the referencing document, relative to the server root, or in the form of a complete URI containing the http:// protocol, the server name, and the path to the document on that server. It may also contain a reference to the ftp:// or mailto: protocols.

Frequently Asked Questions about HREF HTML Attribute

What is the purpose of the HREF attribute in HTML?

The HREF attribute in HTML is used to specify the URL of the page that a link goes to. It stands for Hypertext Reference and is an essential part of creating hyperlinks in HTML. When a user clicks on a text or an image with an HREF attribute, they are directed to the specified URL. This attribute is used within the anchor tag (), making the enclosed content clickable and leading to the referenced web page.

Can I use relative URLs with the HREF attribute?

Yes, you can use both absolute and relative URLs with the HREF attribute. An absolute URL contains the full details of the link’s destination, including the protocol (http or https) and the domain name. On the other hand, a relative URL only specifies the path to the file from the current location. It’s useful when linking to pages within the same website, as it makes the code more concise and easier to manage.

What happens if I don’t include an HREF attribute in an anchor tag?

If you don’t include an HREF attribute in an anchor tag, the tag will still be recognized as an anchor tag, but it won’t function as a hyperlink. This means that the user won’t be redirected to any URL when they click on the text or image. However, you can still use the anchor tag without the HREF attribute to create named anchors for in-page navigation.

Can I use the HREF attribute with tags other than the anchor tag?

The HREF attribute is most commonly used with the anchor tag, but it can also be used with the and tags. In the tag, the HREF attribute specifies the location of an external resource, like a CSS file. In the tag, it sets a default URL for all relative URLs in a page.

How can I use the HREF attribute to link to a specific part of a page?

To link to a specific part of a page, you can use the HREF attribute with a fragment identifier, which is a hashtag (#) followed by the id of the element you want to link to. For example, if you have an element with the id “section1”, you can create a link to it like this: Go to Section 1. When the user clicks on this link, they will be taken directly to the element with the id “section1”.

Can I use the HREF attribute to open a link in a new tab or window?

Yes, you can use the HREF attribute in combination with the target attribute to open a link in a new tab or window. The target attribute should be set to “_blank” to achieve this. For example: Visit Example.com.

Is it possible to use the HREF attribute for email links?

Yes, you can use the HREF attribute to create email links. To do this, you need to use the “mailto:” scheme followed by the email address. For example: Send Email. When the user clicks on this link, their default email client will open with a new message addressed to the specified email.

Can I use special characters in the HREF attribute?

Yes, you can use special characters in the HREF attribute, but they must be URL-encoded to ensure that they are interpreted correctly by the browser. URL encoding replaces unsafe ASCII characters with a “%” followed by two hexadecimal digits.

How can I use the HREF attribute to download a file?

To use the HREF attribute to download a file, you need to specify the path to the file in the HREF attribute and use the “download” attribute in the anchor tag. For example: Download File. When the user clicks on this link, the file will be downloaded to their device.

Is it necessary to use quotation marks around the URL in the HREF attribute?

While it’s not strictly necessary to use quotation marks around the URL in the HREF attribute, it’s considered good practice to do so. This is because it makes the code more readable and helps prevent errors if the URL contains spaces or special characters. Both single (”) and double (“”) quotation marks can be used.

Adam RobertsAdam Roberts
View Author

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week