Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
image
hyperlink
image hyperlink

How to add a link to an image in HTML

Rana Abdul Muneem

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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

<a href="#">
<img src="image.png">
</a>
Add a hyperlink on an image

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

Example

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

RELATED TAGS

html
image
hyperlink
image hyperlink

CONTRIBUTOR

Rana Abdul Muneem
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring