How to Make an Image a Link in HTML

A step-by-step in-depth guide of how to use an image as a link in HTML.

how to make an image a link in html

HTML (HyperText Markup Language) is the most fundamental building component of the World Wide Web. It establishes the significance and layout of web content. The term "HyperText" refers to links that connect online pages both internally on a website and to external websites as well as making links an essential component of the Internet.

An image can also behave as a link so that anyone who clicks on that image will open another desired HTML page. Therefore, we have created this helpful guide on how to make an image a link in HTML. You can simply convert any image into a link by following these steps:

Step 1: First, write the HTML code structure into your preferred text editor or open the current HTML file wherein you want to use an image as a link.

Html
<!Doctype html>  
<html>     
<head>
   <title>Make an image a Link</title>
</head>     
<body>   
   <!-- code to add a link to an image goes here -->
</body>  
</html> 
                            

Step 2: Next, add the <a> tags within the <body> tags. The <a> tag defines the hyperlink which is used to link from one page to another. Then add href attribute, href="#" within the <a> element as it will indicate the link's destination. You should replace the “#” with the desired page URL you want to link your image to. Moreover, you can also add the target attribute,  target="_blank" if you want the link to open in a new tab when clicked.

Html
<!Doctype html>  
<html>     
<head>
    <title>Make an image a Link</title>
</head>     
<body>   
  <!-- code to add a link to an image goes here -->
  <a href="https://www.w3schools.com/tags/tag_a.asp" target="_blank"></a>  
</body>  
</html>
                            

Step 3: Now it's time to add the image you want to link. Within the <a> tags, add the <img> element along with the src attribute, src="#" which should contain the image URL of which you would like to add a link. You can also use the width and height attributes to adjust the size of your image if this is not being done using CSS.

Html
<!Doctype html>  
<html>     
<head>
  <title>Make an image a Link</title>
</head>     
<body>   
    <!-- code to add a link to an image goes here -->
    <a href="https://www.w3schools.com/tags/tag_a.asp " target="_blank">
      <img src="https://images.unsplash.com/photo-1488272690691-2636704d6000?  ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bGlua3xlbnwwfHwwfHw%3D&ixlib=rb-             1.2.1&auto=format&fit=crop&w=700&q=60" width="200" height="200"> 
    </a>
</body>  
</html>
                            

If you followed the 3 simple steps above, you now know how to make an image a link in HTML using the <a>  and <img> tags along with the href and src attributes respectively. You can also set the linked image to open in a new tab by adding the target attribute within the <a> tag.