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="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg" 
     alt="cannot sleep">

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>

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

The End ;p

---

resources;
MDN

Comments

[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!

[Amirul Asyraf]

Cool, thanks Angelo ;p