Image links

Intro

In this lesson, we’re going to learn how to wrap an <img> element in an anchor element to turn the image into a link. The link could be an internal or external link.

Steps

Add anchor element

Type a and press Tab. Add the URL http://example.com/ as the value for the href attribute.

<a href="http://example.com/"></a>

Add image element

Press Enter in between the tags twice to create a blank line in between the tags. Type img and then press Tab.

<a href="http://example.com/">
  <img src="" alt="">
</a>

For this example, we’ll reuse the laptop image again. Type laptop.jpeg as the value for the src attribute.

<a href="http://example.com/"> <img src="laptop.jpeg" alt=""> </a>

Check preview

Make sure your preview is open in your browser so you can try the external link. Try clicking on the image. If you did everything correctly, it should take you to example.com.

Final code

<img src="laptop.jpeg" alt="Laptop on desk">
<img src="circle.jpg" alt="">
<img src="circle.png" alt="">
<img src="airplane.svg" alt="" width="400">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill="currentColor" class="bi bi-airplane" viewBox="0 0 16 16">
  <path d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z"/>
</svg>

<a href="http://example.com/">
  <img src="laptop.jpeg" alt="">
</a>