HTML Hyperlink

A web page can contain various links that redirect you to other page, these links are known as hyperlinks. Hyperlinks allow visitors to navigate between web pages or websites by clicking on a word or an image.

A Hyperlink is specified using an HTML tag <a>, this tag is known as anchor tag and anything between the opening <a> and closing </a> tag becomes part of the hyperlink. When a user clicks on that part, the linked document will be opened or downloaded.

Attributes of Anchor tag
AttributeDescription
hrefStands for Hyperlink REFerence, use to specify the file name to be linked.
target Specifies where to open the linked document. Its values are:
_blank: Specifies to load the linked file into a new blank window/tab.
_self: Load the file into the same tab window in which the linked text was clicked on.
Default target value is _self.
title The title attribute is used to provide a tooltip on the hyperlinked.
Style Specifies an in-line style for the tag. Using the Style attribute, you can decorate the hyperlinked text underline:
text-decoration: none;
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
HTML Hyperlink syntax:
<a href="home.html"> Hyperlink Text Here </a>
<a href="home.html" target="_blank"> Hyperlink Text Here </a>
<a href="home.html" title="Click Me"> Hyperlink Text Here </a>
<a href="home.html" style="text-decoration: none;"> Hyperlink Text Here </a>

When you move the mouse over a link, the mouse arrow will turn into a little hand. By Default, An unvisited link is blue color, when you click on it, the link will be visited, and turned into purple color, and when you press and hold the mouse left button link become active until you release the button, Active link is red color with an underline.

Create a Bookmark

HTML bookmark is used to create links in the same page on a specific part. Bookmarks can be useful if your webpage is very long. When you click on the link, the page will scroll to that location where the bookmark is placed.

For example:
<h2 id="bookmark">Bookmark</h2>
Then, add a link to the bookmark
<a href="#bookmark">Jump to Bookmark</a>

When you click on 'Jump to Bookmark' the page will find id 'bookmark' and scroll to the top of that text.

You can also link the bookmark from another page, By giving the page URL followed by id. <a href="html-hyperlink.html#bookmark">Jump to Bookmark</a>