How to Make a Clickable Image in HTML

In this article, we will see how to make a clickable image in HTML. Normally we add the image using HTML <img> tag but if you want to create a clickable image we need to use both <img> and <a> tag. There is no specific tag to create a clickable image in HTML so we can use <img> and <a> tags.

You may have seen on many websites that when you click on an image, it redirects to another webpage, it is called a clickable image. For example, if you click on a website’s logo image, it will take you to that website’s home page. So you too can easily create a clickable image by following the steps below.

Steps to create a clickable image

To create a clickable image, we need to create a <a> tag and inside it a <img> tag. Then we can add the hyperlink(link) using the “href” attribute of the <a> anchor tag and insert an image using the “src” attribute of the <img> tag. Let’s see an example code:

Example code:

<!DOCTYPE html>
<html>
<head>
   <title>Clickable Image</title>
</head>
<body>
   <a href="https://wonderdevelop.com"><img src="./wonder.png"></a>
</body>
</html>

Output:

Steps:

In the above code, we have created a <a> tag<a> tag and then add our website link using “href” attribute in HTML.
Inside the <a> tag, we have created <img> tag and then insert our website image using the “src” attribute.
We got the output with an image. If I click the image, it will go to the given link. Because the image is placed inside the <a> tag, if the <a> tag occupies the whole image as a link.