Hyper-links In HTML, HTML Links Tutorial

  • Post category:HTML
  • Post author:
  • Post last modified:June 14, 2021
  • Reading time:4 mins read
You are currently viewing Hyper-links In HTML, HTML Links  Tutorial

What Is HTML Hyper-links?

Hyper-links in HTML allow users jump one document to another document. By default hyperlinks are open in the same window. Hyper-links are automatically underline by the browser and its color changes in blue.

Hyper-links are called anchor text and it represent with the <a> tag. When a user mouse hover the hyper text the cursor change into hands.

HTML links tags

<a href="https://www.google.com" target="_blank" title="visit google">Click here</a> to open Google.

In HTML links or hyper-links are defined with <a> tag. The “href” attribute contains the destination URL. And the target attribute defines where the links open the same tab or a new tab or other forms.

Hyper-link “href” Attribute

The href attribute contains the destination address where the page jump.

Set the “target” attribute value

HTML links open in new tab

To open hyper-links in a new tab set the ‘target‘ attribute value on ‘_blank

<a href="url" target="_blank">Click here</a>

HTML links open in the same tab

To open hyperlinks in the same tab set the ‘target‘ attribute value on’ _self‘. This value is a default by a browser, it much better declares the value it is the best way to learn better.

<a href="url" target="_self">Click here</a>

HTML links open in the parent frame

If you want to open the hyperlinks in the parent frame, then set it to the ‘target‘ attribute value on ‘_parent‘.

<a href="url" target="_parent">Click here</a>

HTML links open in the full body of the window

If you want to open the hyperlink in the full body of the window then set the target attribute value on _top.

<a href="url" target="_top">Click here</a>

Image as a link

On many websites, you can see images as a link, here is the simple process to make an image as a link. Just add the <img> tag between the <a> tag.

<a href="https://www.google.com" taget="_blank">
<img src="google.png" alt="google image">
<a/>

Link as a button

if you want to create a link as a button then add the following style on <a> tag. Don’t worry you will learn more about style in our CSS tutorial

<style>
a{
  color:white;
  text-decoration:none;
  padding:15px;
  background-color:blue;
}
a:hover {
  color: grey;
  background-color: dark-blue;
  text-decoration: underline;
}
</style>

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply