Tutorials

How to Add a Hyperlink in HTML

Pinterest LinkedIn Tumblr

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>

Example:

<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.

Href Attribute

It is called Hyper reference. We should add the target URL as a value of href attribute.

Target 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

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

Hyperlink in HTML

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.

Text Links

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>

Image Links

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>

Email Links

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>

Bookmark Links

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.

Write A Comment

Pin It