INTRODUCTION
In the last article , I discussed how text appearing on a webpage can be modified, styled, and changed using HTML formatting tags. In this article, we will learn what a hyperlink is and how hyperlinks in webpages are achieved using the link tag.
What is Hyperlink?
A hyperlink is an element in an HTML document that links a webpage to another section of the document or to another document in entirety. It has two ends known as the Source anchor and the Destination or target anchor. A hyperlink starts at a source anchor and points to the destination anchor. This destination or target anchor be any web resources such as an image, video, PDF file, HTML document, or an element within the web page. By default:
• Unvisited link is underlined and blue.
• Visited link is underlined and purple.
• Active link is underlined and red.
(Note: this default setting can be overwritten by using CSS.)
In HTML, the hyperlink is achieved using an anchor tag <a>.
What is an Anchor tag <a>?
An anchor tag is an HTML tag used to define the beginning and end of a hyperlink. It has an opening <a> and closing tag </a>
Example
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset ="UTF-8">
<meta name="viewport" content= "width= device-width, initial-scale=1.0">
<title >Anchor Tag </title >
</head>
<body>
<a> Hi there! </a>
</body>
</html>
From the example above, "Hi there!" written between the opening and closing tag is the visible part of the line which a user clicks.
Result
If you try clicking the link above, you'll notice that the link takes you nowhere because the destination is not specified.
The anchor tag <a> functions effectively with attributes. Let's look at some attributes used with the <a> tag.
<a> Attributes
1. The href attribute:
href means hypertext reference. It indicates the target destination of the link. It can have an absolute or relative URL(Uniform Resource Locator).
a. Absolute URL:
This links to an external document and includes a full web address which includes the protocol, host name and path of the document. Example
<body>
<a href="https://www.google.com"> About Us </a>
</body>
b. Relative URL:
These are page related paths. It is used to link different HTML pages within a document.
The https://www is absent in this type.
Example of relative URL is Page.html, index.html.
Example:
<body>
<a href="index.html"> About Us </a>
</body>
2. The target attribute:
This tells the web-browser where to open the linked document. Each target starts with an underscore ( _ ) character. The four defined targets used with <a> tag are:
_blank: Opens linked document in a new window_parent: Opens linked document in a parent window_self: Opens linked document in the same window as the source document._selfis the default setting of links._top: Opens linked document in full browser window.
Example:
<body>
<a href="https://www.google.com" target="_blank">Home </a>
<a href="https://www.google.com" target="_self"> About Us </a>
<a href="https://www.google.com" target="_parent">Contact Us </a>
<a href="https://www.google.com" target="_top"> About Us </a>
</body>
Result:
HomeAbout Us
Contact Us
About Us
3. Title attribute:
This specifies extra information about an element such as is always shown as a tooltip message when the mouse is hovered.
Example:
<body>
<a href="https://www.google.com" target="_top" title="Google"> About Us </a>
</body>
Creating Bookmarks with ID and Links
Bookmark anchors are useful in long web pages and enables the user to get to a specific section of a web page without having to scroll all the way up and down To achieve this, the following steps should be taken:
Step 1
On the element, you want to jump to, add an ID attribute.
(An Id is an HTML attribute that provides a unique identity for an element.)
Step 2
On the href of the link tag, add an # and the name of the id given.
Example:
<body>
<a href="#hyper" target="_self">Take me to hyperlink section.</a>
</body>
Result
Hoping you have clicked on the link, you'll be wondering how I achieved that. Let's see the steps followed using an example:
<body>
<h2 id="hyper">What is Hyperlink? </h2>
<p>A hyperlink is an element in an HTML document that links a webpage to another section of the document or to another document in entirety</p>
<a href="#hyper" target="_self">Take me to hyperlink section.</a>
</body>
(N/B: You can also jump to the section of another page by calling the relative URL of that page along with the id value)
Example:
<body>
<a href="index.html #hyper" target="_self">This will take you to hyperlink section in another page </a>
</body>
Result
This will take you to hyperlink section in another page .
Creating a Download Link.
This is almost the same procedure as placing text links but the only difference is that the destination URL will be the file chosen for download.
Example:
<a href="downloads/stethoscope.jpeg"> </a>
Creating an Email Link.
To create a new link that allows the user to send a new email, use the 'mailto: email address inside the href attribute
Example:
<a href= "mailto:airmyekong@gmail.com">Send email </a>
Result
Using a Phone Number as Link
To create a new link that allows the user to dial, copy or save a mobile number automatically, the tel keyword is used as the value of the href attribute followed by the telephone number. An example is given below
<a href=tel:08108431583> Call: 08108431583</a>
Result
Using an Image as a Link
To use an image as a link, the img element is written in between the opening and closing of the anchor tag
Example
<body>
<a href="http://hashnode.com" target="_blank"><img scr="" alt="an image"></a>
</body>
Result
Conclusion
After considering the different ways an hyperlink can appear on a web document, it is worth noting that the pointer of a cursor changes to a hand when hovered over a link. The next in this series will be focused on List tags and it's syntax.