The Hyperlink allows us to link web pages in HTML. Links on the webpage are called Hyperlinks. It can be done with HTML anchor tag element. Users can click on the link to navigate to another webpage. Internal links within the same page are also possible. Almost every web page on the internet has links. This tutorial guides you to How to Add a Hyperlink in HTML page.
The basic syntax of HTML hyperlink
<a href="target url">link text</a>
<a href="http://www.example.com/">Example Website</a>
Attributes of anchor tag
Here is the major Attributes of the anchor tag that will affect hyperlink behavior.
It is called Hyper reference. We should add the target URL as a value of href attribute.
It Specifies where the link to be opened.
Values of this attribute:
_blank – Open in a new window.
_parent – Open in the parent frame.
_self – It is the default attribute. Open in the same window.
_top – Open on top of all the frames or full body of the page.
if we not specify any value for target attribute _self value will be applied.
Rel attribute used to indicate the relationship of the link.
Some values of rel attribute:
bookmark – Indicates it is a bookmark.
nofollow – Indicate search bots not to follow the links.
dofollow – Indicate search bots to follow the links.
noreferrer – Don’t pass the referrer information.
noopener – prevents the new page from access the opener.
external – Indicates it is an external link
Type of hyperlinks
A link can be a text link, image link, or any other HTML element. It may link to an external webpage, another page on same the same site, another part of the same webpage, URL of a file, or an email link. And links can be made with an absolute URL or using a relative URL.
A link created on some texts called text link. Link text may be a word or a set of words or even a paragraph. Link text will be highlighted and when we mouse over the link text mouse pointer will change as a hand symbol.
Text Link Examples
Link to home page: <a href="index.html">Home</a> Link to external website <a href="http://www.google.com/">Go to Google.com</a> Link to a file <a href="http://example.com/file.zip" >Download</a>
We can create hyperlink with Image element. When we click linked image it will take us to link distance.
Image link examples
Image link to website <a href="http://example.com/"><img src="logo.jpg" /></a> Image link to a file <a href="http://example.com/file.zip" ><img src="images/download.png" /></a>
It is a special type of hyperlink to link an email address on the webpage. When we click the email link browse will open the mail client to complete the task.
Email link examples
Email link with text <a href="mailto:[email protected]">Contact us via Email</a> Email link with image <a href="mailto:[email protected]" ><img src="images/contact.png" /></a>
Another special link type. On a webpage, we can link other parts of the same page. It called bookmark links. First, we need to mark page locations with anchor points, Then we can call the anchor point name in the link. It can be done with ID attribute also. For example, click the table of contents on this page.
Bookmark ling example
In this example we will mark top of the page and bottom of the page and link them.
Top of the page <a name="top"></a> <h2 id="h1">Headding One</h2> <a href="#end">Go to bottom</a> <a href="#h1">Go to Headding One</a> <a href="#top">Go to top</a> Bottom of the page <a name="end"></a>
Hyperlink and SEO
The hyperlink is the heart of SEO. Search engines calculating the rank of a webpage based on link quality. Unwanted links and spam links will badly affect your site.