How the HTML <a> (Link/Anchor) Element Works

Learn the basics of how the HTML (<a>) hyperlink element is used to define interactive links on the web.

In HTML, the <a> tag is used to define link/hyperlink elements:

<a>Link element</a>

Link vs Hyperlink:

• A link is an address that specifies a location on the Internet.
• A hyperlink is a type of link that you can click on to activate something or go to a destination, like a website.

In conversation, most people say “hyperlink” and “link” interchangeably.

How to use the 'a' element

The <a> element takes several attributes, with the most important one being the href attribute, which is used to provide the link (URL) destination when users click on it.

Here’s an example of a link that directs you to TechStacker’s front page when you click on it:

<a href="https://techstacker.com">Go to TechStacker’s front page.</a>

The link above contains these building blocks:

• Opening link tag <a>
• Attribute name: href
• Attribute value: "https://techstacker.com" (link URL/destination)
• Link text Go to TechStacker’s front page. (visible to the user)
• Closing link tag </a>

How the link above looks in real-life:

Absolute vs. Relative URLs

The attribute value (link/URL destination) can either be an absolute or a relative URL path. The example from earlier is an absolute URL:

<a href="https://techstacker.com">Go to TechStacker’s front page.</a>

This is a relative URL that leads to an article on this website:

<a href="/html-tags-vs-html-elements-difference"
  >HTML Tags vs. HTML Elements.</a
>

Here’s an absolute URL to that same article:

<a href="https://techstacker.com/html-tags-vs-html-elements-difference"
  >HTML Tags vs. HTML Elements.</a
>

Notice how the absolute URL has much more information than the relative URL:

• It has a protocol (https)
• A domain name techstacker.com
• A slug /html-tags-vs-html-elements-difference

The relative URL only has the slug.

So when do you use which?

• Use relative URLs when you link to content on your own website.
• Use absolute URLs when you link to content on other websites.

You can only use relative URLs to reference content that lives (is stored) on the same server that contains your website. Otherwise, use absolute URLs.

Ok, there’s one more attribute that is commonly used and important to know, especially when it comes to SEO.

The target attribute

Another useful link element attribute, is the target attribute, which specifies where to open the link when users click on it.

If you click on this link:

<a href="https://techstacker.com/">Link to front page</a>

You will be taken to TechStacker’s front page in the same browser tab/window you’re in now. This means that if you link to another website, the user will be moved away from your website, and over to the website you linked to (which you may or may not want).

This happens because by default <a> elements have a target attribute with a value of _self — which means that it opens the link in the same window the user is in.

So this link element:

<a href="https://techstacker.com/"></a>

Is read by the computer/browser like this:

<a href="https://techstacker.com/" target="_self"></a>

Which can be confusing, because you can’t see that (but now you know).

If you would rather have your links open in a new browser tab, you can override the default _self value with a _blank value:

<a href="https://youtube.com" target="_blank" rel="noopener"
  >If you click this, the YouTube website opens in a new tab</a
>

When to use which?

The simple answer is: if you don’t want to move users away from your website, e.g. for SEO purposes, then use target="_blank".

Otherwise, don’t do anything, and your links will default to open in the same browser window (via the _self value).

Using headings as links

Many HTML elements can be used as links, including headings. In fact that’s very common. All you need to do is to wrap the element you want to make to a link inside link tags <a></a>:

<a href="/html-for-beginners">
  <h3>HTML for Beginners</h3>
</a>

Using images as links

Link elements can also make images into links, e.g. for thumbnails or articles or product pages. To do that you simple wrap your image element<img >inside the link element <a></a>, like this:

<a href="/tags/html">
  <img src="../../thumbnails/html.png" />
</a>

The example above will take the user to this HTML article section when they click on the image.

How it looks in real life (try clicking on it):