DEV Community

Amirul Asyraf
Amirul Asyraf

Posted on

How to add a link to the image in HTML

Do you ever wondering how to add a link to your already
HTML image tag ??

Awesome, let us get into that 🔥

The following example is the usual stuff we do to display image in <img> tag.

<img src="" 
     alt="cannot sleep">
Enter fullscreen mode Exit fullscreen mode

When you click the image above, it will zoom in, instead of open the image link. This is the expected result 😅.

But how to add a link to the image ??

Easy peasy 😉

This example builds upon the previous one, showing how to turn the image into a link. To do so, nest the <img> tag inside the <a>.
You should make the alternative text describe the resource the link is pointing to as if you were using a text link instead.

<a href="">
  <img src=""
       alt="Visit Meme site">
Enter fullscreen mode Exit fullscreen mode

Try to click the above image and you will direct to the source link.

The End ;p


Top comments (2)

frontendengineer profile image
Let's Code

Hi Amirul, pretty nice straightforward post.

I just want to share the last video I created on youtube regarding links as a supplemental to learning.

Have a great day all!

asyraf profile image
Amirul Asyraf

Cool, thanks Angelo ;p