How to use an image as a link in HTML?

HTML Web Development Front End Technology

We can add image as a link and other HTML elements as a link. A link is a connection from one Web page to another web page.

We can add page links to a web page. HTML links are hyperlinks. The <a> tag defines a hyperlink and used to link from one page to another. href attribute is used with the <a> tag, which indicates the link's destination.

To make page links in an HTML page, use the <a> and </a> tags, with href attribute used to define the links. We should use the <a>…</a> tags inside <body>…</body> tags.

Syntax

Following is the syntax to add image as a link on the web page.

<a href="link address"><img src="image destination"></a>

Example

Following is the example program to make image as a link.


<!DOCTYPE html>
<html>
<body>
   <p><a href="https://www.Youtube.com/"><img src="https://www.tutorialspoint.com/assets/questions/media/426142-1668760872.png" style="width:50px;height:50px;"></a></p>
</body>
</html>

Following is the output for the image as a link, clicking on the image will navigate us to google home page.

Example

Following is the example program to make image as a link.


<!DOCTYPE html>
<html>
<body>
   <center>
      <h2>Image as a Link</h2>
      <a href="https://www.tutorialspoint.com"><img src="https://www.tutorialspoint.com/assets/questions/media/426142-1668760765.png" alt="Tutorialspoint" style="width:50px;height:60px;"></a>
   </center>
</body>
</html>

Following is the output for the image as a link, clicking on the image will navigate us to destination webpage.

Example

Following is another example program to make image as a link.


<!DOCTYPE html>
<html>
<head>
   <title>HTML Image as link</title>
</head>
<body>
   The following image works as a link:<br>
   <a href="https://www.qries.com/">
      <img alt="Qries" src="https://www.qries.com/images/banner_logo.png" width=150" height="70">
   </a>
</body>
</html>