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>