HTML Hyperlinks

Hyperlinks are the crux of any hypertext system, including HTML. They are the reason why hypertext is called hypertext.

That is, hypertext is interactive text whereby we can jump to other pieces of text anywhere from between the text; this jumping behavior is driven by hyperlinks.

Defining it formally for HTML:

The resource here could be an HTML document, an image, a video, a PDF, an executable file, a section within a document, and so on.

A hyperlink is simply a connection between two different pieces of information on the web. In that sense, a link has two endpoints, more formally referred to as its anchors.

• The anchor that points to another resource is called the source anchor.
• The anchor pointed to by another anchor is called the destination anchor.

If we think of this in terms of graphs, a link is simply a directed edge between two vertices representing anchors. The arrow runs in the direction of the link's destination.

Imagine such a graph at the scale of the whole World Wide Web! Clearly, it would look something very complex, with overlapping edges amid billions of vertices.

And that's essentially why the World Wide Web is called a 'web'; that is, it indeed is an interconnected system of information spread across the entire world.

Let's now see how to create hyperlinks in HTML.

As we saw ealier in this unit, specifically in the HTML Basics chapter, a hyperlink is created via the <a> element in HTML.

Recall that the letter 'a' here stands for 'anchor', and you now know where this term comes from.

Anyways, to speak more precisely, the <a> element creates a hyperlink only when it has an href attribute on it. href stands for hypertext reference and is the means by which an <a> element links to another resource.

When we set an href on an <a> element, the element becomes a source anchor (i.e. the originating point of a hyperlink). The destination anchor's URL goes into the href attribute.

Let's consider a very basic example.

In the following code, we create a link pointing to our home page, using an absolute URL:

<a href="https://www.codeguage.com/">Visit Codeguage's home page</a>

When we click on the link, the browser navigates to the given URL in the same window where we're viewing this page.

As a side note, by default, browsers render the text inside an <a> element (that has an href) with a blue color, and being underlined. When hovered over with the mouse pointer, the pointer changes to a pointing icon, and that's simply to indicate interactivity.

For already visited links, the anchor text is instead colored purple. Try visiting the link above and then come back to this page and refresh it — you'll notice the link colored purple this time.

Moving on, by no means is it necessary for the destination anchor of a hyperlink to be an HTML document — it can be any resource.

For example, in the code below, we establish a link to a plain text file, greeting.txt, in the same directory as this HTML page:

<a href="greeting.txt">Open greeting.txt</a>

Live Example

Take note of the href used here; this time, it's not an absolute URL but rather a relative URL, which is resolved relative to the current HTML document.

If the href attribute is empty — that is, set to the value "" — it is taken to refer to the current document.

So for example, supposing that the current document is greeting.html, the following <a> element (with an empty href),

<a href="">This is a link</a>

is equivalent to this:

<a href="greeting.html">This is a link</a>

A particularly important attribute that could be set on an <a> element is target.

The target attribute is used to specify where the underlying link ought to be opened.

By default, as you may already know, clicking on a link on a webpage opens up the associated resource in the same window as that of the webpage, effectively replacing that webpage. But with target, it's possible for us to customize this behavior.

There are multiple possible values for target. Some are special values, beginning with an underscore (_), that have a special meaning; all the rest of the values simply relate to the name of an iframe.

Since we cover iframes in the next HTML Iframes chapter, we'll defer the latter notion of target for the next chapter.

For now, let's explore each of the special values of target.

_blank

When target is set to "_blank", the linked resource is opened up in a blank new window. The original webpage remains as it is in the other window.

Consider the following example:

<a target="_blank" href="/">Visit Codeguage in another window</a>

As you click on the link above, the linked page opens up in a new browser tab, thus keeping from interrupting the ongoing activity on this page.

And that's an amazing thing.

You might have already experienced this kind of a behavior at some point while surfing the web. It's quite common for websites to open up links in new windows, usually when they don't want to interfere with the reading experience of the user, and even when they just point to third-party websites.

While it's possible to have all links on an HTML page open up in blank windows, we should wisely make such decisions, for every link opening up a new window can tend to irritate the user as he/she has to constantly keep closing windows.

_self

Another special value is _self, but there's really nothing special about it — it's just the typical link-opening behavior.

That is, when target is set to "_self", the linked resource is opened up in the same window where the underlying HTML document is displayed.

Consider the following example:

<a target="_self" href="/">Visit Codeguage in this window</a>

Click on the link shown and you'll just witness the usual link-opening behavior.

_parent

The third special value is _parent. _parent has a lot to do with iframes which we'll discuss in the next HTML Iframes chapter. Likewise, we'll explore it in alongside iframes in that chapter.

_top

The fourth special value is _top. Just like _parent, _top is associated with the idea of iframes and, henceforth, will be explored in the next HTML Iframes chapter.

Besides target, another useful attribute of the <a> element is rel.

In fact, rel is a valid attribute on any HTML element that is used to establish a link. We already saw one such element in the previous chapters, that is, <link>.

For now, we're just concerned with rel on the <a> element.

The rel attribute works essentially the same way on <a> as it does on <link>, it's just that the possible values of rel on <a> differ from those on <link>, trivially because <a> is different in nature than <link>.

The rel attribute's value is an unordered set of keywords, with different keywords being delimited by a space.

For the <a> element, the possible keywords can be:

Notice how some keywords here, as per the HTML standard, are annotations and some are not.

So what exactly are annotations here?

Well, relationships that are annotations simply specify 'how' the hyperlink should be processed, for e.g. signal to search engines that we don't endorse a linked resource (we'll see what this means shortly below)

Annotations could be thought of as additional notes for a hyperlink (and that's basically what the word 'annotation' means).

The other relationships, on the other hand, specify 'what' the link represents. They just tell us about the nature of the linked resource. For instance, such a relationship might indicate that the linked resource is an alternate representation of the current HTML document (for e.g. a PDF).

While not very commonly used, all these possible values of rel are necessary for an HTML developer to at least be aware of so that when a use case arises, he/she could leverage the right tools from HTML.

In the following sections, we explore some of the more common rel values.

nofollow

The purpose of nofollow is pretty basic — it says that the linked resource is not endorsed by the linking resource.

Typically, as search engines crawl the web, link by link, they tend to increase the credibility of a website when it's linked to by another one. However, this doesn't happen, or perhaps not as strongly, when the link is a nofollow link.

Commonly out there, links that are not nofollow are referred to as do-follow links. Obviously, do-follow links are the default in HTML.

Visually there's absolutely no difference between a do-follow and nofollow link — the only difference lies in how search engines treat the link.

Let's see an example of a nofollow hyperlink.

<a href="https://example.com" rel="nofollow">Visit example.com</a>

As you can see, the link rendered here looks exactly like a normal do-follow link, and will even open up like one; once again, nofollow is only for search engines.

opener and noopener

Both the values opener and noopener relate to the ability of accessing a linking document's window by means of JavaScript.

Because truly understanding these values and the concept of an opener does require knowledge of JavaScript, we'll be deferring this exploration to our JavaScript course.

Generally speaking, whenever we have a link with target="_blank", we MUST label the link's relationship as noopener.

Something as follows:

<a href="https://example.com" rel="noopener" target="_blank">Visit example.com</a>

When we visit the noopener link here, and the link opens up in a new window (by virtue of target="_blank"), the linked new window can't access this window by means of JavaScript.

noreferrer

When a link is used to open up another resource in the browser, the browser tends to dispatch an HTTP Referer header with it to the end server of the linked resource.

Basically, Referer is just meant to tell it to the server as to who referred to the requested resource.

As an example, let's say you click the following link which points to example.com:

<a href="https://example.com">Visit example.com</a>

The moment you do so, the browser dispatches a request to the server of example.com and sends it an HTTP Referer header to it holding the URL of this page.

Using the Referer header, the server of the linked resource (example.com above) can easily identify which website links to its resources.

If you don't want the referred link to know about your website, you can annotate the link using the noreferrer relationship. noreferrer simply keeps the browser from sending the Referer header upon requesting the linked resource.

As simple as that.

Here's an example:

<a href="https://example.com" rel="noreferrer">Visit example.com (with noreferrer)</a>

With noreferrer set, if we now open up the same link as shown above, the linked resource's server would have absolutely no clue that we linked to it, treating the link merely as a direct link (i.e. directly opened up in the browser via the address bar).

Exploring the rest

The three most commonly used keywords in the rel attribute's value — nofollow, noopener and noreferrer — have been discussed above.

Now, let's spare a few minutes in quickly going through some of the other possible rel values and see where they could come in handy.

Starting with alternate, this relationship is used to indicate that the linked resource is an alternate representation of the current HTML document.

For example, let's say that the webpage of a software's documentation can also be viewed as a PDF file; if the webpage has a visible link to this PDF file, it should be labelled with the alternate relationship.

Something as follows:

<a href="documentation.pdf" rel="alternate">View PDF version<a/>

Not really difficult to understand, was this?

Similarly, if a linked resource represents a license document for the current HTML document, we should go for the license relationship:

<a href="license.txt" rel="license">View licensing information<a/>

Moving on, if the current HTML document is part of a series of documents, and we have a link to a previous or next document, we should use the prev or next relationship, respectively.

For example, it's quite common to have blog articles written in multiple parts, each part being a separate HTML document itself. In this case, we can put the relevant links in each document, and label them using either rel="prev" or rel="next".

Here's a simple example:

<h1>Writing HTML (Part 2)</h1>

<p>Previous: <a href="writing-html-1" rel="prev">Writing HTML (Part 1)</a></p>
<p>Next: <a href="writing-html-3" rel="next">Writing HTML (Part 3)</a></p>

We are depicting a document that represents the second part of a very long article, meant to explain how to write HTML. There are links included at the top to the previous article in the series and even the next one.

Each of these links is given an appropriate relationship, prev or next, depending on whether it represents the previous part or the next part in the series.

Earlier on, we stated that the resource that a hyperlink points to could be a specific part within an HTML document rather than a complete document. That's where the concept of a fragment comes in.

As we learnt in HTML URIs, an HTTP URL can end with an optional component, known as the fragment. It is preceded by the hash (#) symbol and simply denotes a fragment, i.e. a section, in the underlying HTML document.

Precisely, the fragment of a URL refers to the name of an anchor — more specifically known as a destination anchor — in the underlying HTML document.

So how do we create a destination anchor in HTML?

Well, back in the day, the <a> element was exclusively used to create both, source anchors and destination anchors (read the snippet at the end of this section). However, with time, this ceased to be the case and now we can turn any HTML element into a destination anchor.

"How?" you ask. By using the id attribute.

The id attribute, when assigned to an HTML element, makes the element a destination anchor, whereby the name of the anchor is given by the value of the attribute.

Shown below is an example:

<p id="anchor1">This paragraph is a destination anchor.</p>

We have a <p> element that's made a destination anchor by virtue of the id attribute. The name by which this anchor (or fragment) could be referred in a URI is anchor1 since the value of id is "anchor1".

Now, creating a destination anchor isn't interesting on its own. It only becomes useful when it's linked to.

In the following code, we establish a link to the #anchor1 element (this #anchor1 notation refers to an element with id="anchor1") using <a>:

<p><a href="#anchor1">Go to #anchor1</a></p>

<p id="anchor1">This paragraph is a destination anchor.</p>

Carefully notice the href of the hyperlink added — it begins with #.

Hmm. Does this remind of something? Something from the HTML URIs chapter?

Well, href="#anchor1" is a relative reference that provides the fragment component of the current URI (which is basically just the URI of the current document). In simpler words, it navigates us to the destination anchor in the current document with the name anchor1 — this is the second <p> element.

Go ahead, open the example below and click on the hyperlink; notice what happens as you do so.

Live Example

Apparently, only the browser's address bar changes — containing the fragment #anchor1 this time; nothing else happens.

This is because the default behavior of navigating to a fragment only comes into action when the browser is able to scroll the document to a point where the anchor touches the top edge of the viewport.

In our case, as you can see in the example document above, there isn't that much of content to be able to produce a scroll bar for it. And likewise, when we click on the link, nothing happens (simply because the browser can't scroll the page).

So what to do?

Well, we could try to deliberately put in a lot of dummy content on the page just so that it gets a scroll bar, and then we could witness the effect of navigating to the fragment #anchor1.

But we don't need to worry about this when we have CSS to the rescue.

That is, using height on the <body> element, we can alter the height of the HTML document.

A fairly large value, like 1000px, would lead to the document's height exceeding the viewport and thus cause a scroll bar to be rendered by the browser. This in turn would allow us to witness the effect of clicking on the link pointing to #anchor1.

Let's do this now:

<body style="height: 1000px">
   <p><a href="#anchor1">Go to #anchor1</a></p>

   <p id="anchor1">This paragraph is a destination anchor.</p>
</body>

Live Example

Now with the scroll bar in place, open up the example again and click on the link.

So what happened now?

The page got scrolled right? And to the point where the destination anchor merely touches the viewport, right? This is how the browser handles navigating to a fragment.

As we learnt above, the id element can be set on any HTML element. What if we set it on an <a> element that's already a hyperlink?

Well, it's completely valid to do so. And in fact, it's quite common!

Consider the example below:

<h1>Learning hyperlinks</h1>

<p><a href="#anchor1" id="anchor1">Navigate to this section.</a></p>

We have a hyperlink defined by an <a> element, pointing to the URI #anchor1. This same <a> element turns out to be the #anchor1 fragment.

In other words, clicking on the link would navigate to itself.

Live Example

This begs the question: Why would we want a hyperlink to point to itself?

In more formal terms: What's the point of making the same <a> element a source anchor and a destination anchor?

Good question.

Such a set up is commonly seen when one wants to allow the user to be able to easily bookmark fragments of a document.

Clicking on the link navigates to a fragment in the document, and that fragment turns out to be the link itself. Since the fragment appears in the URL, we can thereafter bookmark the webpage in that state to save the fragment in the bookmark as well.

Makes sense?

<p><a name="anchor1">This is a destination anchor.</a></p>

<p><a id="anchor1">This is a destination anchor.</a></p>