Want to add a link to an image? How to make an image clickable? In this tutorial, you will learn how to make an image a link in HTML
It is super simple to make an image link in HTML.
Add a link to an image in HTML
The first step is to add an image using the image(<img>) tags. See the below HTML code for reference.
<img src="image.jpg" alt="my image" />
Once you have the image to the HTML document it’s time to add the link such that when clicked, it should open a URL or link.
In order to do so, we need to make use of the anchor(<a>) tag.
As stated above, The second step is to wrap the image tag with the anchor tag and give the anchor tag a href attribute to set the link. How to do it? Below is the code snippet for your reference.
<a href="url">
<img src="image.jpg" alt="my image" />
</a>
Make the image clickable and open the link in the new tab
If you want to open the link in a new tab when you click the image, then you need to add the target attribute to the anchor tag.
<a href="url" target="_blank">
<img src="image.jpg" alt="my image" />
</a>
Whether the image is small or big it doesn’t matter, once you wrap the image with the anchor tag the browser treat it as clickable. The whole image works as a button. And you can use this method to make an image clickable.
Use the HTML code snippet provided above as a template. Make sure you replace 3 things.
- Your desired hyperlink to the href= attribute.
- The image source URL or local path to the src= attribute.
- Finally, change the alt text for the image to the alt= attribute.
Conclusion
Hope you were able to make an image a link in HTML successfully. If you face any issues or have any confusion regarding the steps, let us know in the comment. We will definitely help you with the HTML project.
Like this article? Follow us on Facebook and LinkedIn. You can also subscribe to our weekly Feed
