One of the most interesting things about HTML is the ability to link out to the other documents as well as files.

When you link out to relevant pages and cite sources in a web document, you make it more resourceful and useful.

Inserting links in HTML pages is not at all a tough thing to do.

The only requirements to be able to link to something in HTML are not too much, but just a couple of things…

1. The URL or Web address of the reference
2. Knowledge about using HTML anchor tag

The reference could be anything from a web page to a rich media file like an image, an email address, a PDF document etc.

Next up is a quick primer on different ways of using HTML anchor tag to create hyperlinks.

Simple HTML hyperlinks

Say the URL of the page you want to link is w3bits.com/guides/hyperlinks/. Let’s create a hyperlink to this page with a nice label or anchor text.

<a href="http://w3bits.com/guides/hyperlinks/">HTML Hyperlinks</a>

And that’s it!

The above HTML is all we need to set up our first HTML hyperlink. Whenever we create such a link, we have to make sure that the URL part goes inside the href attribute of the anchor tag.

To make our hyperlinks little future-proof, we can strip off the http/https part from the URL when linking:

<a href="//w3bits.com/guides/hyperlinks/">HTML Hyperlinks</a>

This will take care of inconvenience caused by non-https redirection conflicts in future. Let’s move further and cover a few more advanced uses of hyperlinks in HTML.

Make a link open in a new tab

It’s a common practice on web to have links opened in a new tab whenever needed. There’s this nice attribute which gives you the ability to the same with HTML hyperlinks.

<a href="//w3bits.com/guides/hyperlinks/" target="_blank">Open hyperlinks guide in a new tab</a>

Note: Whenever you use a target="_blank" with your links, make sure you also add the noreferrer and noopener relationship attributes. This keeps things safe from the window.opener API exploit.

Jump-links

If you’ve seen links to different sections on the same HTML page before, you know what we’re talking about. Here are the two things to follow for linking to a specific part of a page.

1. Give an ID to the target i.e. our specific section
2. Pass this ID (prefixed with a ‘#’ symbol) as reference to the jump-link

Here is a quick implementation of the same, first with the target section…

<p id="para1">This is our target section #1.</p>

And the trigger, i.e. our jump-link to target the section that we just declared above. This link is the live demonstration of a jump-link.

<a href="#para1">Go to Section #1</a>

Linking to an email address

It’s quite easy to link to rich media like images, videos, audios, documents. What we have to do is host them somewhere on web and get a URL from there.

<a href="https://path/to/the/document.pdf">HTML Hyperlinks</a>

There’s a little different way to do the same for an email address. If I want people to click on a link to send me an email, it can be achievable by going this way…

<a href="mailto:admin@w3bits.com">Send me an email</a>

The above markup creates a link which when clicked would pop open the email app (eg. Outlook, Apple Mail etc.) with admin@w3bits.com in the ‘To’ field.

But there’s a subject field too below the ‘To’ field. Sure, let’s add a subject to the email link.

<a href="mailto:admin@w3bits.com?subject=Want%20to%20say%20hello!">Send me an email</a>

What’s that %20 doing in our sweet subject? Well, as you might know already, URLs encode spaces to ensure the data transmission safety. Those %20s are the encoded space characters only.

Cc? Bcc? Sure.

<a href="mailto:admin@w3bits.com?subject=Want%20to%20say%20hello!&cc=w3bits@gmail.com&bcc=c99.rahul@gmail.com">Send me an email</a>

Looks ugly, but does the job just the way you want it do. Why not also add a body for the message?

<a href="mailto:admin@w3bits.com?subject=Want%20to%20say%20hello!&cc=w3bits@gmail.com&bcc=c99.rahul@gmail.com&body=Stopping%20by%20to%20say%20hello!">Send me an email</a>

Relational attribute of HTML hyperlinks

Search engine crawlers nowadays demand webmasters to specify one thing particular about hyperlinks. It is the relationship of the linked URL with the document containing it.

And this is where the relational attribute of HTML hyperlinks comes into the picture. It enables you to tell the Web crawlers…

1. Whether or not to follow or consider or evaluate a link (rel="nofollow")
2. If the link is external (rel="external")
3. Whether or not to prevent the referrer info from passing to the target website (rel="noreferrer noopener")

This is how you create an external link with the help of the target and rel attributes, which is also supposed not to be followed by the search crawlers:

<a href="//w3bits.com/guides/hyperlinks/" target="_blank" rel="nofollow external noreferrer noopener">Hyperlink implementing 'rel' attribute</a>

There is some more that we can do with HTML hyperlinks, which also includes JavaScript usage. To keep things simplified, let’s save it for a different guide in future.

Until then, befriend all the above discussed HTML hyperlink features.

All the best!