You need to use the HTML image element with an HTML hyperlink element to create an image link. The HTML element <img> displays an image. The HTML element <a> creates a hyperlink. Thus to turn an image into a link, you need to use the <img> tags within the tags of an HTML <a> element.

In recent times, using images as links is a popular practice. Images more effective to attract user’s attention.

The Syntax

You need to nest two HTML elements, an HTML image element within an HTML hyperlink element. The nesting looks like below -

<a href=""> <img scr="" alt=""> </img> </a>

The HTML <img> element loads the image on a website. It uses the attribute, src to specify the path or URL of the image. You can use the alt attribute to specify an alternative text. Browsers display this alternative text when they can’t load the image.

The HTML hyperlink element <a> turns an image into a working link. It uses the href element to specify the URL or address of the link.

A complete coding cample

Here comes a simple and easy example that creates an image link.

The HTML source code

Your index.html file should have below HTML source code

<!DOCTYPE html>
<html lang="en">
   <head>
      <title> A Sample Web Page </title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <label> Please click below image to explore Coderslang.com</label>
      <div>
         <a href="https://learn.coderslang.com/"> 
         <img src="/nat-1.jpg" alt="Coderslang" class="imgLink"> 
         </a>
      </div>
   </body>
</html>

This example creates an image link, using an HTML <img> tag within an HTML tag.

The HTML <img> tag adds an image on the website. The HTML <a> tag turns the image into a link to a website, https://learn.coderslang.com.

The CSS Source Code

After you write the HTML mark-up, you may need to use CSS for some style adjustments.

This example uses CSS styling to adjust the height and widths of the image hyperlink. You can write or copy the below CSS code in your CSS file, style.css

.imgLink {
	height: 200px;
	width: 250px;
	border: 1px solid black;
}

When you run the HTML file, index.html in a browser, it displays the image you added. If you click the image, the browser loads the website, https://learn.coderslang.com.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript