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

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

Example

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: