How to use an image as a link in HTML?


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. The 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>

After clicking on the image, it will redirect to the destination webpage.

Updated on: 29-Aug-2023

314K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements