DEV Community

loading...

How to add a link to the image in HTML

asyraf profile image Amirul Asyraf ・1 min read

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="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg" 
     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="https://www.thecoderpedia.com/blog/programming-memes/">
  <img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg"
       alt="Visit Meme site">
</a>
Enter fullscreen mode Exit fullscreen mode



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

The End ;p


resources;
MDN

Discussion (2)

pic
Editor guide
Collapse
angelomiranda profile image
lt

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!

Collapse
asyraf profile image
Amirul Asyraf Author

Cool, thanks Angelo ;p