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 the link, our 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.

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 another 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, a 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 webpage.

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

Recall from the discussion above that a destination anchor is simply one of the two ends of a hyperlink, that is pointed at (by a source anchor).

By default, when we navigate to a URL containing a fragment, the browser scrolls the document to the point where the destination anchor appears in the viewport, touching the top edge of the viewport.

We already know that the <a> element can be used to create source anchors, using the href attribute. However, <a> can also be used to create destination anchors, and that's by using the name attribute.

For this very reason, the fragment in a URL is sometimes also referred to as the anchor of the URL (as it contains the name of a destination anchor).

The name attribute of an <a> element specifies the name of the anchor, which could thereafter be used as a destination anchor of a link.

Ideally, name shouldn't contain spaces since the name appears in the URL, specifically in the fragment portion of the URL.

Let's consider an example.

In the following HTML, we have an <a> element without an href but with a name attribute, in order to make it a destination anchor:

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

Live Example

The name of the anchor is anchor1, and so to specifically navigate to it in the document, we need to augment the URL in the browser's address bar with the fragment #anchor1.

We can either do this manually, by typing in #anchor1 after the URL in the address bar, or we could use another <a> element taking us to this very URL. We'll go with the latter.

In the following code, we put a source anchor prior to our destination anchor which takes us to that destination anchor.

<p><a href="#anchor1">Take me to the destination anchor.</a></p>
<p><a name="anchor1">This is a destination anchor.</a></p>

Live Example

Notice the href of the new anchor here; it is a relative-path reference that turns out to only define the fragment portion of the target URL.

Now, when we click on the newly-added link in the document above, we don't notice any effect whatsoever and that's 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.

However, as you can see, in the document above, there isn't that much of content to be able to produce a scroll bar for it.

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 so that the user could see the entire document by means of scrolling it.

Let's do this now for the HTML document we created above to be able to better witness the effect of navigating to the #anchor1 fragment:

<body style="height: 1000px">
   <p><a href="#anchor1">Take me to the destination anchor.</a></p>
   <p><a name="anchor1">This is a destination anchor.</a></p>
</body>

Live Example

Now with the scroll bar in place, open the document above and click on the first link. Notice what happens as you do so.

So what happened?

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.

Now, it's totally possible for a source anchor to be a destination anchor at the same time. That is, on an <a> element, we can have both the href and name attributes, simultaneously.

This is shown below:

<h1>Learning hyperlinks</h1>
<p><a href="#anchor1" name="anchor1">Navigate to this section.</a></p>

(In this document too we have the height style applied to <body>.)

Live Example

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?

Before we end this discussion, it's important to note that HTML allows us to turn any element into a destination anchor, not just <a>. And that's by setting the id attribute on that element.

id works similar to name on the <a> element in that it defines the name of the destination anchor, and could therefore be linked to. But obviously as stated before, it isn't just confined to <a> unlike the name attribute — we can set it on anything.

Shown below is an example:

<p><a href="#anchor1">Take me to the destination anchor.</a></p>
<p id="anchor1">This paragraph is a destination anchor.</p>

Live Example

A fair question arises at this stage.

Which approach should we use in our documents to represent destination anchors? <a> with the name attribute or any element with the id attribute?

Well, we should ideally be going with id as our first preference, but if that ain't possible for us, for some reason, then we should resort to using <a> with the name attribute.

Pretty easy resolution.