1x1 Web Fundamentals

Tutorials > The Web > Links

Links

In this tutorial we will be talking about links. If you've managed to reach this tutorial, then you know all about links and it might seem like a trivial topic. However, we will go into some more specific/essential knowledge to know since we are discussing the Web in detail in this module.

In the last tutorial we talked about URLs and their structure, and how URLs uniquely identify resources on the Web, for example webpages (HTML documents), images, and so on. We also mentioned a little bit about what links are. Links, short for hyperlinks, are simply just small navigation components on a webpage. Those components usually are made up of text and a URL (which we don't see and is usually hidden to us). The text might often be blue and underlined to indicate that it is a link, and it typically describes what the resource linked is. The URL in a link can be an absolute URL or one of the types of relative URLs.

For example, this is a link: Tutorial Index; the text is Tutorial Index and the URL (which we don't see) is https://1x1.nicolldouglas.dev/tutorials. The text describes that it is a link to the tutorial index of this website, and that is indeed what the URL points to. And so what happens when you click a link is that, the browser will use the hidden URL to request that new webpage or resource, and then display it to you in place of the current webpage that you are on.

For a bit of history, the original purpose of the web was to make it easier to access, read, and navigate through text documents. And those were facilitated by the three pillars of the Web, spoken of in 1989 by Tim Berners-Lee, the creator of the Web. Those were:

  1. URL, an address system that keeps track of Web documents (which we discussed in the last tutorial).
  2. HTTP, a transfer protocol to retrieve documents when given their URLs.
  3. HTML, a document format allowing for embedded hyperlinks.

As you can see based on those three pillars, everything on the Web revolved and revolves around documents and how to access them. Since the early days of the Web, the Web has also evolved to provide access to images, videos, and other resource/file formats as we have mentioned.

But as you can imagine, before the advent of the Web, accessing documents and moving them from one place to another was quite difficult. URLs made access a lot easier, but links and their ability to navigate so easily to new documents, was the key secret as to what made the Web so successful, and why they are a core topic in this module. Not only that, but being able to link from one webpage to another is also what made the Web, "the Web"—a network of interlinked resources, resembling a spider's web.

A simple illustration of the web
Figure 1 - A simple illustration of the web

The same way there are different types of URLs, there are also different types of links. However, these are more semantic than they are technical:

  • Internal link — A link between two webpages or resources that belong to the same website. Without these links, the concept of a website would be hard to define because there would be no way to relate two resources available on the same web server other than the fact that they came from the same one.
  • External link — A link from your webpage to someone else's webpage (on a different website). Without external links, the concept of "the Web" would not exist.
  • Incoming link — A link from someone else's webpage (on a different website) to your webpage (the opposite of an external link). Note that you don't have to link back when someone links to your site in order for links to work.

Anchors

There is also a fourth kind of link called an anchor. We've mentioned anchors quite a lot already, but I shall explain them properly here.

An anchor is essentially a link inside a document that links to another part of the same document. Instead of tieing two different documents together, it ties together two sections of the same document. As we mentioned in the last tutorial, when you click on an anchor link, the browser will add the anchor to the URL and then take you to that location in the document.

Take for example this anchor link: Go to "What Are Links?"; it contains the relative URL #what-are-links and if you click on it, it takes you to one of the earlier sections of the document as well as add the anchor to the URL.

Links are not only important because they form the very fabric of the Web, but also because of search engines. As we mentioned in a previous tutorial, a search engine is a website that provides functionality for you to search and look for other websites on the web. Links are important to search engines because in order for users to be able to find websites through a search engine, a search engine needs to be able to find those websites first.

The way in which search engines find new websites and webpages is by visiting a webpage and recursively following the links that are contained within the loaded webpage. This allows them to discover the millions of webpages and websites out there on the web and index them in a convenient manner for us to search for. Links facilitate the very existence of search engines, which form a vital part of the Web and make it one level easier for us to find new websites and webpages above external links.

Key Concepts Learnt

  • A hyperlink, commonly known as a link, is a small navigation component on a webpage that allows you to load a new webpage or resource in the web browser.
  • A link is comprised of text, describing the link, and an absolute or relative URL, which the browser uses to request the new resource.
  • Links are a key foundation of the Web because they allow you to link multiple webpages together in order to make them more discoverable, and form the very network of interlinked resources that we call the Web.
  • There are several types of links including internal links (linking two resources on the same site) and external links (linking two resources on different sites).
  • An anchor is a link inside a document that takes you to a different part of the same document when clicked.
  • Links also facilitate the existence of search engines which allow us to easily browse the web and find new websites.