Custom Icon
Custom Icon

Custom Icon
Cultivate your career with 50% Off!Get 50% off for life!
1d7h17m47s

Custom Icon
Custom Icon

How to add a link to an image in HTML

We can link one webpage to another by using an image as a link. This link is called a hyperlink.

We use the <img> tag to display an image. The <a> tag is used to create a hyperlink. Placing an <img> tag inside an <a> tag displays a clickable image that leads to another page.

The <a> tag has an attribute, href. The href attribute's value specifies the location of the webpage we want to link.

Syntax

Error: Code Widget Crashed, Please Contact Support

The <a> tag encapsulates the <img> tag. This encapsulation applies the hyperlink to the image.

Example

<html>

  <head>

  </head>

  <body>

    <a href="https://www.educative.io" target="_blank">

      <img src="https://www.educative.io/static/imgs/logos/logoMarkv2.png">

    </a>

  </body>

</html>
Add a hyperlink to the Educative home page on an image of the Educative logo

Explanation

  • Line 5: We create a hyperlink using the <a> tag. We set the destination page to the Educative home page using the href attribute. The target attribute tells the browser how to open the webpage. We use the "_blank" value to open the page in a new window or tab.
  • Line 6: We create an image using the <img> tag. Using the src attribute, we specify the location of the image we want to display. In this case, we give the URL for the Educative logo.

Note: Click here to explore the other options of the target attribute.

Instead of mentioning a URL in the src attribute of the <img>, we may also provide a file path. We do this when the image we want to display is saved on our computer. In other terms, the image is locally stored. We can see an example below:

<img src="./myFolder/image.png">
Display an image that is locally stored

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved