How to add link in image in HTML [Image Links]

If you are wondering about How to add link in image in HTML, then we have solutions for that in this Tutorial.
In simple way, you just need to Wrap your Image inside anchor tags.
Where anchor tags will make that image Clickable and you can Assign any web Link to that Image Easily.

What is an Anchor Tag in HTML?

Anchor tags <a> are used for adding Hyper Links in HTML Web Pages.
Whatever you write or Define Between Anchor tag's Starting <a> and Closing </a> tags will become a Clickable Link.
Where by using Anchor tag's href you can assign a Link where you want link that Text/HTML Element.

<a href="https://programminghead.com">
  Click me
</a>

Add Link in Image [by Using Anchor Tags]

To add a link in image using Anchor Tags, you just need to Declare/Write your Image tag inside HTML Anchor Tag's Starting <a> and Closing </a> tags and you areDONE

<a href="https://programminghead.com">
  <img src="myImage.jpg"/>
</a>

In this Example we have Linked our Image (<img src="myImage.jpg"/>) to an URL (https://programminghead.com) using HTML Anchor Tags.
Now your Image is linked and whenever someone click this Image, they will be redirected to the Given Link.

How to open Link in New Tab, Current Tab, Parent Frame,New Window and in a Particular Frame?

In order to Open Links in New Tab, Current Tab, Parent Frame, New Window and in a Particular Frame, we have Anchor Tag's target Attribute.
We just need to specify how we want to open your Link.
For example, If you want to open your Link in a New Tab: use target="_blank".

<a href="https://programminghead.com" target="_blank">
  <img src="myImage.jpg"/>
</a>

If you want to Open your Link in the Current Tab, then use target="_self".

<a href="https://programminghead.com" target="_self">
  <img src="myImage.jpg"/>
</a>

If you want to Open your Link in the Parent Tab, then use target="_parent".

<a href="https://programminghead.com" target="_parent">
  <img src="myImage.jpg"/>
</a>

If you want to Open your Link in a New Browser Window, then use  onClick="window.open('https://programminghead.com', '_blank', 'width=800,height=800')".
Here we need to fire a onClick JavaScript Event. Using JavaScript we can Open new Browser Window on a Click.

<a onClick="window.open('https://programminghead.com', '_blank', 'width=800,height=800')">
  <img src="myImage.jpg"/>
</a>

If you want to Open your Link in a Particular Frame, then use target="frameName" (replace frameName with your HTML Frame Name).

<a href="https://programminghead.com" target="frameName">
  <img src="myImage.jpg"/>
</a>

Frequently Asked Relatable Questions

What is the correct HTML for creating a hyperlink

In HTML, the correct way for creating hyperlinks is to use Anchor Tags and by using Anchor Tag's href Attribute we can assign a Link.

<a href="https://programminghead.com" target="_blank">
  Click Me
</a>

By Writing this Code, We are Creating a Hyperlink with "Click Me" text.
When we click the text, this will redirect us to Linked URL.

HTML hyperlink image

To make HTML Image a Hyperlink, we have to Wrap Image tag within HTML Anchor tag's Starting <a> and Closing </a> tags.
This will make our Image Element a Hyperlink in HTML Web Page.

<a href="https://programminghead.com">
  <img src="myImage.jpg"/>
</a>

Clickable text or images that take you to different sites

To make HTML Elements like: HTML text or HTML Images Clickable, we need to Wrap them inside HTML Anchor tag's Starting <a> and Closing </a> tags.
This will make both the TEXT and Image a Clickable text or Image.

<a href="https://programminghead.com">
  Click Me
</a>

<a href="https://programminghead.com">
  <img src="myImage.jpg"/>
</a>

How to hyperlink a picture

To create a hyperlink by using Image, we need to use HTML Anchor tags.
HTML Anchor tags can turn HTML Elements like Images into Hyperlinks.

<a href="https://programminghead.com">
  <img src="myImage.jpg"/>
</a>

How to make an embedded link

To embed links in HTML Web Page, we need to use HTML Anchor Tags. Where using HTML Anchor Tag's href attribute, we can Embed any LINK inside HTML Webpage.

<a href="https://programminghead.com">
  My Embedded Link
</a>

How to make image clickable in HTML

Anchor Tags are perfect Option to make HTML Elements like: Image Clickable in HTML.
You just need to put your Image Tag between HTML Anchor tag's Starting <a> and Closing </a> tags and i will become a Clickable Image.

<a href="https://programminghead.com">
  <img src="myImage.jpg"/>
</a>

How to insert hyperlink in JPEG image

To add links to any image type like: JPEG, PNG, GIF or SVG, you can use HTML Anchor Tags.
Because by using HTML Anchor tags you can add links to any type of Image.
Just put your Image between Anchor tag's Starting <a> and Closing </a> tags and your Image will become a Clickable Image.

<a href="https://programminghead.com">
  <img src="myImage.jpeg"/>
</a>

How to turn image into link

To turn Image into link (means you can add a link to HTML Image and your image will become clickable), you need to use HTML Anchor Tags.
HTML Anchor tags are used for adding Hyperlinks inside HTML.
After Wrapping your Image tag between HTML Anchor tag's Starting <a> and Closing </a> tags and your Image will turn into a link.

<a href="https://programminghead.com">
  <img src="myImage.jpg"/>
</a>

Add links using HTML link Tags

Don't get confused between HTML Anchor tag <a> and HTML Link Tag <link>.
Where HTML Anchor tags <a> are used for creating Hyperlinks
and
HTML Link tags <link> to define relationship between current Document and External Source.

In simple Language:
HTML Anchor Tags <a> are used for Inserting Links in HTML
and
HTML Link Tags <link> are used to link External Resources like External CSS.