HTML5 Hyperlink Basics

Basics of HTML 5 - Part 6

Foreword: On a web page of the Internet, you are likely to see a short string of text or an image, which when clicked another web page would be displayed in your browser, replacing the one you were seeing. Such text or image is called a hyperlink. The interest in this tutorial is to see how to construct such hyperlinks.

By: Chrysanthus Date Published: 3 Apr 2015

Introduction

This is part 6 of my series, Basics of HTML 5. On a web page of the Internet, you are likely to see a short string of text or an image, which when clicked another web page would be displayed in your browser, replacing the one you were seeing. Such text or image is called a hyperlink. The interest in this tutorial is to see how to construct such hyperlinks. You should have read the previous parts of the series before reaching here, as this is a continuation.

For a long web page, a link can also be used to move the page to a different vertical position. For example, you can have a long web page, which begins with a menu. When you click a menu item, the section that has the details of the menu item will come to the top of the browser window; the menu potion will now be above (of top) the browser window and you will not be seeing it. In this case, clicking the menu item makes the page to jump to the portion of the menu details.

A hyperlink is sometimes simply referred to as a Link.

Web Recourses
Any item residing at the server, which you can see or hear at the browser is a web resource. An example of a web resource is an HTML5 document. An HTML5 document is the HTML5 file at the server. At the browser, you see an HTML5 document as a web page. Other examples of web resources are an image, a video clip or sound (music). At the server, an image file holds an image, a video file holds a video clip and a sound file holds the sound.

A hyperlink can be used to bring a web resource to the browser. In the case of the HTML5 document, you see a new web page in the browser. In the case of an image, when you click the hyperlink, everything being equal, you would see a new web page displaying only that image and nothing else (no text). In the case of a video clip, when you click the hyperlink, everything being equal, a blank web page will open, and then you will see the clip (moving pictures and sound).

Source and Destination Anchors
A Hyperlink has what is called a Source Anchor and a Destination Anchor. The source anchor is the element (text or image) that you click. The destination anchor is the web resource that appears in the browser window (to replace the web page that had the link on which you clicked).

The destination anchor can also be a vertical position on the same web page having the link you clicked. In the introduction above, I gave an example, where I talked about a menu and the details of the menu below the menu portion on the same web page. In this menu example, clicking a menu item takes its details (which may be in an HTML5 Paragraph element ()) to the top of the page. In this case, the HTML5 paragraph element is the destination anchor. When the destination anchor is a portion of the same web page, that portion is actually an HTML5 element (another example is <hr> the horizontal rule).

Below, we shall first consider hyperlinks that call web resources to the browser before we consider hyperlinks that cause the page to jump to a different vertical position. I call the first group of hyperlinks, simple hyperlinks. I call the second group of hyperlinks, Jump Hyperlinks.

Uniform Resource Locator
A Uniform Resource Locator abbreviated, URL is a kind of address you type at the address bar of your browser to receive a web page. A example, is

                  http://www.somewebsite.com/apage.htm

Here, the web site address is http://www.somewebsitee.com. apage.htm is an HTML5 document in a directory (folder) in the server. Note the forward slash that separates the website address and the HTML5 document.

URL and Server Directories
A web server normally has HTML5 documents in directories. The directories are in a hierarchy (directory tree). The root directory has the HTML5 document which represents the web site; this is the home page. This document has one of the following four names:

index.htm, index.html, default.htm or default.html.

So when you design your web site, your home page should have one of the above four names. This name does not appear in the URL. Whenever, you type the address of the web site (URL) such as the one below, the home page will appear (come to) the browser:

                  http://www.somewebsite.com

None of the above possible four names is typed in the URL.

Now, directories are indicated in the URL by forward slashes. Consider the following URL:

            http://www.somewebsite.com/folder1/folder2/apage.htm

Here the home page is in the root (home) directory, having one of the above four names. The name is not indicated in the URL. The first part of the URL, that is, http://www.somewebsite.com, would call the home page when you type only that part in the address bar of the browser. In the URL above, folder1 is the first level sub directory. folder2 is a second level sub directory. Here, the file (web page), apage.htm is in the sub directory, folder2. You access a file in any directory in this way, by appending it at the end of the URL after the directory path. A URL generally has a site address, names of folders separated by forward slashes and a web page file name. You cannot have two web page file names in a URL.

You do not only need to have only the home page in the root directory. You can have other web pages in the root directory. These pages would have any name, but with the extension .htm or .html.

Assume that you have a page called, special.htm, in the root directory at the server, if you want this page at the browser, you would type the following at the browser’s address bar:

             http://www.somewebsite.com/special.htm

You begin with the site address; this is followed by a forward slash and then the name of the file. The first single forward slash of the URL indicates that the next item is either a first level directory or the name of a file in the root directory.

Web resources as mentioned above can be identified by a URL were the last item of the URL is the file name of the web resource. Before we continue, know that you can call a web resource to the browser, by typing the URL of the web resource at the address bar and then clicking Go. Uniform Resource Locator (URL) forms a component of the hyperlink as you will see below.

Hyperlink

Here, I refer to a hyperlink that brings a web resource from the server to the client browser.

The a Element
The a element is used to define a Hyperlink or a Jump Hyperlink. In its simplest form, the syntax of the a element is:

 <a href="URL">Content</a>

Here, the start tag is:

 <a href="URL">

It begins with the open angle bracket. This is immediately followed by the letter ‘a’ in lower case. Next, you have an attribute. The attribute name is href; the attribute value is a URL e.g. http://www.somewebsite.com/apage.htm. This value must be in quotes (either double or single quotes).

Looking at the syntax, we see that after the start tag we have the content. The content is text or an image (we shall consider the case of an image later). The text is just simple text, like, Products, for a web page that sells products. After the content, you must have the end tag. Remember, with HTML5, all tag names and attribute names are in lower case; so A for the start or end tag should be in lower case. An example of the a element is

 <a href="http://www.somewebsite.com/folder1/products.htm">Products>/a>

When you type this in the BODY element of your web page or inside any element (e.g. Paragraph element) in the BODY element, the user will see the word, Products, underlined in the browser.

The tags of the a element do not appear on the web page at the browser. It is the content that appears, and underlined, by default. For the above example, when the user clicks the content, Products, the products page will appear in the browser replacing the page that had the link. Note that the file name of the URL, of the a element above, is, products.htm. This file is the file that is downloaded from the server to the client and to be displayed on the browser.

This is how the a element is used as hyperlink to download web resources to the browser: All you have to do is to have the resource file name as the last item of the URL of the href element. Remember, attribute names are case sensitive and the href name should be in lower case. The URL also has the directory path to the web resource (as explained above).

For the a element, a stands for Anchor.

An a element used in this way, forms a simple hyperlink. Let us first see how the Simple Hyperlink is implemented, before we look at the Jump Hyperlink. Before we do that, let us look at some rules governing the URL as the value of the href attribute.

Files in the same Directory
Remember that web resources are files in directories at the server. An HTML5 document is a web resource; at the client browser, it is a web page; while at the client browser, there are two “instances” of the file content: one in the file at the server and the other displayed at the browser. A sound file is a web resource; at the browser it is sound (music) that you hear. A video clip file is a web resource; at the browser, you see a moving image and hear sound. Note that a video clip file has both moving image and sound, all in one unit.

The HTML5 document is the main web resource for your web page. While at the browser, there are two “instances” of a web resource content: one in a directory at the server and the other (exactly the same) at the client browser.

If the file you are looking for is in the same directory as the file (HTML5 document) currently displayed at the browser, then for a hyperlink in the page at the browser to access the file you are looking for, all you need in the value (URL) of the href attribute is the file name. Let us say you have a page having a hyperlink and the page is currently displayed at the client browser. Let us assume that when you click this link, the next HTML5 document to be downloaded and displayed is in the same directory at the server as the file currently displayed. Let us say that the name of this next file to be downloaded is products.htm. In this case, the a element would be:

<a href="products.htm">Products</a>

So all you need as value of the href attribute is just the name (including the extension .htm) of the file. You can also precede the file name with the left part of the complete URL, but this is not necessary since both files are in the same directory. Let us call this directory, the current directory.

What we have said in this section concerning the file name is applicable to other web resources.

Sub Directory to Current Directory
Here we talk about the case, where the file to be downloaded is in a sub directory to the current directory. In this case, for the value of the href attribute, precede the file name with the sub directory names that exist below the current directory. Imagine that the current directory has an immediate sub directory called, dir3. Also assume that the dir3 directory has an immediate sub directory called dir4. Now, assume that the file, products.htm, is in dir4. To download (and automatically have displayed) the file, products.htm, you would have as a element:

<a href="dir3/dir4/products.htm">Products</a>

When the user clicks this link at the browser, the “products.htm” page would appear. You separate the directory names from one another with a forward slash. The last directory name is separated from the file name with a forward slash. You do not begin the value of the href attribute with a forward slash. Beginning with a forward slash has a special meaning (see below). You can precede the value of the href attribute with the rest of the left part of the URL, but that is not necessary.

Any Directory
For the value of your href attribute, you can identify the root (home) directory by the forward slash, /. From this forward slash, you can type the path of any file. Assume that for the above situation, you had a directory called, dir1 just inside the root directory. Assume that inside dir1 you have dir2 and inside dir2, you have dir3.

Also assume that your current directory is dir3. Assume that when your link is clicked, it would display a file called, furniture.htm residing in dir1. Your link to “furnitue.htm” for a displayed file of the current directory would be

<a href="/dir1/furnitue.htm">Furniture</a>

You can see how beginning the value of the href attribute with a forward slash, refers to the root directory (were you have the home page file). You can precede the start forward slash here with the left part of the complete URL, but that is not necessary.

Implementing a Hyperlink
By the word, Hyperlink, here, I am referring to a simple hyperlink as described above. I will use two simple HTML5 documents (web pages) for the illustration. This is the first document:

<!DOCTYPE HTML>
<html>
 <head>
 <title>
 Example
 </title>
 </head>
 <body>
 <a href="products.htm">Products>/a>
 </body>
</html>

The above code has a link. You can save the above code with a file name such as, one.htm. When the link is clicked, the file it has to display has to be residing in the current directory and has to be called, products.htm. To try the code, you can type (copy and paste) the following file, and save it in the same directory as the file one.htm with the name, products.htm.

<!DOCTYPE HTML>
<html>
 <head>
 <title>
 Products
 </title>
 </head>
 <body>
 The products are found in this page.
 </body>
</html>

This file is the second document implied above.

Jump Hyperlink
A Jump Hyperlink is my vocabulary for a hyperlink that when clicked, will take you to a different vertical position of the same page. To achieve this, the source anchor and destination anchor have to be on the same page. For the simple hyperlink, the source anchor is the a element in the current page and the destination anchor is a web resource.

With the Jump Hyperlink, the source anchor is an a element and the destination anchor is any HTML5 element, both on the same page. However, here, the destination anchor element has an ID. This ID also has to be present in the source a element. The ID is the connection between the source and destination anchors. Let me illustrate this with an example. Assume that you have a long web page. Assume that at the top of the web page, you have a menu list, and one of the list items is “The Computer”. Assume that down on the page, you have the computer details in a paragraph element. Assume the long file is called myPage.html.

The menu item would be something like:

 <a href="myPage.html #C1">The computer</a>

The Paragraph element down below in the page would be something like:

 
 Details of the Computer: Microprocessor: 4GHz, RAM: 256MB
 

Most HTML5 elements can have an ID attribute as indicated in the paragraph element above (ID means IDentification). The purpose of the ID is to differentiate one element from another. For example it is possible for you to have two paragraph elements with the same content. The best way to differentiate them is with the ID. The value of the ID attribute must always be in quotes (single or double). The value must always start with a letter ([A-Za-z]) of the alphabet and can be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). The ID is unique for each element.

Above, the ID is “C1”. The value of the href attribute of the source anchor is a URL ending with what is called, the Fragment Identifier. In the above case, the URL is the shortened, myPage.html (we are dealing with the same page). This is followed by the special # character and then the ID, “C1”, of the Paragraph element. The ID after the # character is called the Fragment Identifier. The # character separates the fragment identifier from the URL in the href attribute value.

So, for the Jump Hyperlink the source anchor should have a fragment identifier and the destination anchor should have an ID. The value of this ID is also the fragment identifier.

You can try the above rules with the following code; save the file with the name, myPage.html:

<!DOCTYPE HTML>
<html>
 <head>
 <title>
 Long Page
 </title>
 </head>
 <body>
 <a href="myPage.html#C1">The computer</a>
 
 
 Details of the Computer: Microprocessor: 4GHz, RAM: 256MB
 
 
 </body>
</html>

The line break elements simply make the page long by adding blank lines.

Vertical Point in another Page
Some good news here: It is possible for you to click a link in one page and go to a particular vertical position in a different page. You still use the Jump Hyperlink technique, but here, the URL in the source anchor page is that of the different page. The HTML5 element in the different page should have an ID value. In the current page, the fragment identifier of the source anchor should be that ID value.

Main use of the a Element
An example of the a element code is:

 <a href="url">Title of New Page</a>

This tag will open the web page whose URL is the value of the href attribute. The page will open by default in the current tab window replacing the page that had the a element (hyperlink).

The target Attribute
If you want the new web page to open in a new tab window, then use the attribute called, target, as follows:

 target = "_blank"

The value of the attribute, target, is the reserved word, "_blank". For the above a element, to open the new web page in a new tab window, the inclusion of the target attribute will result in,

 <a href="url" target="_blank">Title of New Page</a>

Link to an Image
The a element can be a hyperlink to an image. In this case when you click the a element hyperlink, only the image will appear to replace the previous window (tab) that had the a element. The tag for this is:

 < href="imageURL">Image Title</a>

For the imageURL, the image file name such as pic.jpg would end the URL. The URL can be something like,

 http://www.somesite.com/dir1/dir2/pic.jpg

Downloading a File
When I was learning HTML, many years back, I thought that having a file downloaded, was a difficult thing. It is not difficult; you just need to know the secret, which I give you now. The file can be an application file, an image file, a video file, or some software. The file should not be an HTML file or a text file or an image file. Any of these three files will simply open in the browser window as if it were an HTML document page.

Assume that you have a file with the name, nam.ppp, in a server and the URL for the file is http://www.somesote.com/dir1/nam.ppp. To have this file downloaded by the user, all you have to do is to place the following a element in an HTML document (body):

 <a href="http://www.somesote.com/dir1/nam.ppp">Download File</a>

When the user opens the page that has this a element, he would see the hyperlink with the content, Download File. If he clicks this link, a dialog box will appear asking him whether he wants to open the file or save it. If he clicks, Save, then the file will be downloaded into his computer hard disk. You can have some other text as content to the a element instead of “Download File”.

Again, watch out for the following: There are certain files, of which, when their names are at the end of the URL, they will open in the browser window to replace the previous page that had the a element. Examples of such files are HTML files, text files and image files. These are files that are executable by the browser. These files are determined by their extensions. The extensions I know for this type of files are: .html, .htm, .txt and image file extensions supported by the browser. So, if in the a element, the file of the URL is not executable by the browser, then it can be downloaded, when the user clicks the hyperlink.

Content of a Element
In theory, the content of an a element can be anything. It can be an image element; it can be a paragraph element; it can be a table element; it can be a section element, etc. The following code samples, show how the a element can be used, where its content is an image or a paragraph.

 <a href="documentURL"><img src="imageURL" alt="Image Title"></a>

The above is for an image as content. Below is for a paragraph as content.

 <a href="documentURL">
 
 text text text text text …
 
 </a>

Here, the a tags for the hyperlink are above and below the paragraph element.

When the content of the a element is some element (e.g. paragraph) other than text, you would see the element as a hyperlink; meaning that when the mouse pointer is placed over it, the mouse pointer would become a hand.

That is it for HTML5 Hyperlink Basics. It has been a long ride. It was worth it. We take a break now and continue in the next part of the series.

Chrys

Broad Network

Related Articles

HTML5 Hyperlink Basics

Basics of HTML 5 - Part 6

Introduction

Hyperlink

Related Links

Comments