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