Under the hood: Hyperlinks explained

A bit of terminology

Technically, whilst used interchangeably, the terms Internet and World Wide Web are not the same thing. The Internet is not the content that you are reading now, it’s not Google or Amazon. The Internet is a global network of communications and computer networks that together form an infrastructure to allow data storage and exchange.

That is to say it is the all the computers that store information  and communications cables and satellites and radio antennae that are interconnected around the world.

The World Wide Web is all the documents and information linked together that essentially sits on top of the Internet.

Or simply put the Internet is the system and the world wide web is the information.

A touch of history and technical background

The World Wide Web is built on hyper links. In 1989 Tim Berners-Lee, a British computer scientist, made a proposal for an information management system and on December 25th 1990 the very first communication from a Hypertext transfer protocol (HTTP) server to a client was made and the Word Wide Web was born.

HTTP

HTTP is a communications protocol – a protocol is a set of rules and a communications protocol is a set of rules that if followed by all parties results in successful transfer of data from one point to another.

In the realm of the web then the parties are the server and the client. The server is the computer system where the information is permanently stored and the client is a browser, commonly referred to as an Internet browser because it can handle more than one type of communication protocol.

The most familiar browsers are Intenet Explorer, Mozilla FireFox, Apple Safari, Google Chrome and Opera. There are other proprietary browsers built into mobile devices but they all serve the same purpose and that is to render or display content retrieved from remote servers.

Now that we understand what the web is and how it came about let’s look at the all important glue that holds it all together.

How web pages are referenced in the world wide web

Hyper links are really no more than embedded references from one document to another. However the power comes in their flexibility. They can be applied to text and images and can link any one piece of information to any other anywhere in the world.

Every web page or document on the Internet,  – some 8.08 billion indexed web pages – has to have a unique reference so that we can find it from anywhere else in the world. The term used for this is a Universal Resource Locater (URL) and has the following anatomy.

The anatomy of URLs

Let’s consider the URL for this page and break it down to understand its composition:

https://www.jujuhq.com/2016/10/under-the-hood-hyperlinks-explained

 http://

The first part http:// you will now recognise as the part that defines the communications protocol or in URL speak the scheme.  It tells the browser that you are requesting a web page and is a technical requirement of a URL.

 www

The next part is the www standing for world wide web it tells us we are locating a website, although it’s not a technical requirement of a URL. I won’t go into too much detail here but there are many URLs which won’t actually work if you use the www component.

For example: http://news.bbc.co.uk is a complete URL but it won’t work with the www. This is an example of a sub domain, where news. is the sub domain and “bbc.co.uk” is the domain. Read my article on domains for a more detailed description.

jujuhq.com

This is the domain name, the main part of the URL it is a user friendly name for the location of the host of the page. i.e. where it is stored.

/2016/10/under-the-hood-hyperlinks-explained

 This is the final part of the URL and it is composed of a couple of folder names used to organise the documents of the web site ending with the title of the document or web page.

Now that we have an understanding of the anatomy of a URL it’s easy to see how each document can have a unique reference and hyperlinks will now be easier to understand.

Two types of hyperlink

Technically there are two types of hyperlink, the absolute and relative. I will explain them both to you and describe scenarios where you would you use each type.

Relative links

A relative link is a short cut from one part of a website to another. It isn’t a fully qualified URL and makes no sense if used outside the context of the website that it belongs to. For that reason you would only use relative links within a site.

Commonly they are used in navigation menus and to link from one page to another for example the link above to the article about domains uses a relative reference.

Examples

The markup for hyperlinks is the anchor tag:

<a href="..." target="..." title="...">link text</a>

A hyperlink using an absolute reference to this page would look like this:

<a href="http://jujuhq.com/2016/10/under-the-hood-hyperlinks-explained" target="_top" title="Read the Juju Digital article">an article explaining hyperlinks</a>

<a href=“../../2013/09/under-the-hood-domain-names-explained" target="_top" title="Alex demystifies domains in this article">Read my article on domains</a>

Anatomy of the hyperlink

The anchor tag is used to create a hyperlink. The definitive explanation of the anchor tag read the W3C Schools entry: http://www.w3schools.com/tags/tag_a.asp.  To precise we would typically use three attributes that describe the link to the browser and the user:

 href

href stands for Hypertext Reference and is the most important attribute and the one we are most interested in. This is where we put our links. As you can see the first example is a fully qualified URL with the scheme, domain and page.

The second example uses a very different notation. The two dots are an instruction to the server to go back up the document hierarchy one level then go forward to the folder named 11 and find the document called domains-explained.

You can traverse the document tree of the whole site like this. Every time you put ../ you are saying go up another level so ../../2016/7/article-name would take you to another article in the July archive of 2016.

target

The target attribute tells the browser whether to open the page in the current window or tab or whether to open a new one. The value _top means load it on top of this page i.e. in this tab or window. To open it in a separate window or tab then the value to use is _blank.

title

The title tag is used by the browser to display a small but helpful piece of text to the user when his mouse pointer hovers over the link text.

Conclusion

We’ve learned that hyperlinks are the glue that holds the world wide web together and that it sits on the infrastructure of the Internet.

We have learned that hyperlinks can be used to reference any document, page or Internet resource anywhere in the world from anywhere in the world via a unique reference called a URL and that there are essentially two types of hyperlinks, namely absolute and relative and when we would use each.

You should now be equipped with the knowledge and understanding that you need to create effective hyperlinks in your website.

I hope that you found this article useful. If so please share it with your friends and comment below.