How to Use a href in HTML [+ Examples]

What would the web be without links?

Well, not much of a web at all — the World Wide Web is essentially a system of web pages.And how are those pages connected? Hyperlinks, or links from one document to another, usually appearing as hypertext. In fact, the “H” in HTTP/HTTPS stands “HyperText”. Simply put, there’s no web without links.

We all know hyperlinks when we see them, whether we’re perusing an online store or going down a Wikipedia rabbit hole. In essence, browsing the web is just clicking link after link.

So, in this guide, we’ll be peeking under the hood to see what these links look like in HTML. To write links into your web pages, you’ll need the <a> element, paired with the href attribute — let’s learn how to use both.

For example, consider this link to the homepage of HubSpot. The HTML for that hyperlink looks like this:

There are several things to note here, all important for the link to work:

• The link text is wrapped in an opening <a> tag and a closing </a> tag. All text between these tags is selectable and receives link styling.
• The href attribute, and its accompanying attributes, are placed inside the opening <a> tag.
• The attribute value of href (inside the quotation marks) is a URL that tells the browser where to go when the link is selected.
• Note the additional attributes target=“_blank” and rel=“noopener” — these tell the browser to open the web page in a new tab. Unlike href, these attributes are not necessary.

To be more precise, the link above uses an absolute URL to specify a destination on a different website. However, href can take on other values too, as we’ll see next.

a href Values

You’ll most often see the href attribute used to link to another web page on the same domain or a different domain. href can also be used for other things, like linking to a different part of the same page, or serving a different web protocol than HTTPS. Let’s review each of these possible values with examples.

Absolute URL

As discussed above, an absolute URL points to a file on another website. In other words, it’s a URL that contains a different domain name from the current page’s URL (e.g. hubspot.com).

Here’s another example: Go to Google search.

This hyperlink also contains an absolute URL:

It doesn’t matter where this link is used — it always points to the same place, the Google homepage. That’s why it’s called an “absolute” URL.

Bonus tip: Notice how the link text describes what the link does. This makes your site more accessible to those using assistive technologies.

Relative URL

A relative URL references a file on the same website. For example, here’s a link to our Ultimate Guide to HTML.

And here’s what the code for that looks like:

See how the href value looks different? It doesn’t include the protocol HTTPS or the domain name. When this part of the URL is left out, the browser assumes that the specified file is located on the same domain as the current page (in this case, hubspot.com).

We call these URLs “relative” because the destination of the link is specified relative to the current web page. If we pasted the HTML above on a page on a different website, it wouldn’t work.

Why use relative URLs in lieu of absolute URLs? The answer is that relative URLs come in handy if the file path of the linked file changes, such as in the case of a website restructuring or a domain change. If this happens, the relative URL will still work, since it only contains the name of the linked resource and not the entire file path.

URI Fragment

Use a URI fragment to link to a different part of the same web page. URI fragments begin with the hash (#) symbol, followed by the id of the desired page element.

For example, this link directs you to the H3 above this one.

You can also use the value #top to send visitors back to the top of the page.

URI fragments are useful for chapter links, or any instance in which users can jump to an earlier/later section of a page.

Additional Protocols

The absolute URLs and relative URLs we’ve seen so far use the HTTP/HTTPS protocol, which serves pages on the World Wide Web. However, we can use other protocols with href too, like mailto: and file:.

For example, click this link to send an email to example@gmail.com (though we can’t guarantee you’ll hear back).

A Script

Lastly, you can create a link to trigger JavaScript code.

href: Creating Links on the Web

If you’re anything like me, you spend all day clicking various links to get around the web. And if you’re just learning HTML, the <a> element and its accompanying href attribute are central to understanding how web pages are tied together. By learning these concepts and how to write them, you’re a step closer to building websites on your own.