HTML Hyperlinks

This tutorial is part of a web programming course for people who have no programming experience.

Before starting the video, make sure to download this zip file. When you extract the file, you'll end up with a folder named hobbies, this folder should be placed inside your web-programming.

In order to add a hyperlink to a web page, you use an a element. The 'a' stands for 'anchor', which seems a little outdated now because nobody calls them anchors anymore. When the page is viewed in the browser, the text in between the opening and closing a tags will be underlined by default. This makes it easy to recognize it as a link that can be clicked on.

Every a element must include an href attribute, which specifies the page or file it links to. The following code creates a hyperlink to Google's home page.

<a href="http://www.google.com">Click here to go to Google</a>

When creating links to other websites (rather than to pages on your own website), you may want the link to open in a new browser tab. To do this, add a target attribute, and set it's value to _blank, like so:

<a href="http://www.google.com" target="_blank">Click here to go to Google</a>

To understand hyperlinks, you must first understand file systems. File systems are a collection of folders and files. File systems are hiearchical data structures, much like HTML documents. Here is a diagram of what your web-programming folder might look like at this point in the course (notice the nesting of folders and files).

Notice that there a few files named index.html, and that they are each located in a different folder (a folder cannot contain two files that have the same name). These files serve a special purpose in that they act as a table of contents for the folder that contains them. Index files normally display a list of hyperlinks to all the other pages within the same folder. But becareful, it can be confusing for beginners to deal with so many files named index.html. When dealing with an index file, always be aware of which folder contains it. Many students have made the mistake of updating the wrong index file.

The file system on an average computer would have thousands, even millions of files and folders. Just like HTML elements, folders can act as containers. The diagram above shows only a tiny fraction of the files and folders in a file system. Folders in a file system can be highly complex, and organized with folders nested deeply within another folder. The web pages we have been creating are quite simple, but as you learn you'll find that the HTML code for even simple web pages can have thousands of elements nested deeply.

Relative Hyperlinks

Assume that you are working in the index.html file located in the web-programming folder. Be careful to note that there are other files named index.html but they are in different locations within the folder structure. If you wanted to add a hyperlink that points to the eagles.html file, you would have to set it up like this:

<a href="hobbies/bird-watching/eagles.html">Visit the Eagles!</a>

Notice that the href attribute is set to a path that leads to the eagles web page. A path is a very important concept for programmers to understand because programs usually 'link' to other files. In the diagram below I attempt to highlight the path that must be taken from the index.html page to the eagles.html page. The HTML code for the hyperlink is placed in index.html, so that's the starting point. From there the path begins, first by moving into the hobbies folder. The next step is into the bird-watching folder, finally the path ends with the name of the destination file. Notice that each step in the path is separated by a forward slash (if you are a Windows user you might be used to seeing a back slash to separate folder names in a path, but on the web hyperlinks use forward slashes).

Now let's assume that we are working on the HTML code in the eagles page, and we want to add a hyper link back to the index.html page (in the web-programming folder). When building a path, if you want to step 'up', or out of a folder you must do it like this: ../ The syntax may look a little strange but pay close attention to it, its two periods followed by a forward slash. If we verbalize the path from eagles.html to index.html we could say that we first need to move up, out of the bird-watching folder. The next step would be to move up, out of the hobbies folder (and into the web-programming folder). From there, we can reach our destination by specifying the index.html file. So the complete hyperlink in our HTML code would look like this:

<a href="../../index.html">Visit the Index page (in the web-programming folder)!</a>

The previous two code samples are examples of relative links because the path is relative to the file that contains the link.

Absolute Hyperlinks

Absolute hyperlinks are URLs, which often include a path, but before the path comes the server name. Absolute hyperlinks usually begin with http:// or https:// (these are two different protocols but don't worry about them now). The server name is important because the files for a website (web pages) must be placed on a computer that runs web server software (thus making the computer a server). On the world wide web, every web server has a name, known as a domain name. Note that in the programming world, the term server name is often referred to as the host name or domain name

The first code sample on this page is an example of an absolute link (it points to Google's homepage). Note that an absolute link does not depend on the location of the page that has the hyperlink in it. In theory, you could put the link in any page on the web and it would always lead to the same destination, unlike relative paths. Relative links depend on a starting point (the page that has the hyperlink in it), where as an absolute link does not. In the video I compare absolute links to latitude/longitude, while relative links are paths that specify how to get from one specific location to another.

For more details about URL, you can jump ahead to the lesson on how the web works

As mentioned, the URL used in an absolute link can include a path after the server name. Consider the URL used in this hyperlink:

<a href="https://www.remwebdevelopment.com/blog/html/html-lists.html">HTML Lists</a>

In the code sample above, the server name (in this case the server name is 'www.remwebdevelopment.com') is followed by a path on the server. This link indicates that the web server has a folder named 'blog', and within that folder there is a file named 'overview-of-ux-testing-41.html'.

In-Page Links

You can create hyperlinks that point to specific places within a web page. This comes in handy if a web page has a lot of content on it.

In order to mark an element on a page so that you can link to it, you can add an id attribute to it. Consider a web page that may be broken up into sections, and you would like to link to the second section within the page. You might start each section off with an heading like this:

<h2 id="s2">Section 2</h2>

Note that an 'id' attribute has been added to the H2 element, and that it's value is set to 's2'. Also note that 's2' is arbitrary (I made it up), you can make up your own ids for elements, so we could have just as easily used 'sect2' instead. If you wanted to put a table of contents at the top of the page that links to each section, the link to section 2 could look like this:

<a href="#s2">Jump to Section 2</a>

Notice that the href attribute starts with a # and then specifies the id (in this case s2) of the element that marks the beginning of section 2. The use of the # is part of the rules of the syntax for linking to an element by it's id.