How to Make an Image a Link in HTML (Step by Step)

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

how to make an image a link in html

In HTML (HyperText Markup Language), the term "HyperText" refers to interconnected hyperlinks that connect online pages both internally on a website and externally to other websites making links an essential component of the Internet. Therefore, using HTML, an image can be made to behave as a link so that anyone who clicks on that image will open another desired HTML webpage. As a result, we have created this helpful guide on how to make an image a link in HTML. You can simply make any image into a clickable link by following the steps below.

How to Make an Image a Link in HTML

Step 1: Add a basic HTML template to your code editor

First, to make an image a link in HTML, write or copy a basic HTML template into your preferred code editor or open the current HTML file wherein you want to use an image as a clickable 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: Add the <a> tags within the <body> tags

The next step to making an image a link in HTML is to 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 the href attribute, href="#" within the <a> tags 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: Add the image you want to make a clickable link

Lastly, to fully make an image a link in HTML, add the image you want to link using the <img> tag within the <a> tag. Within the <a> tags, add the <img> element along with the src attribute, src="#" which should contain the image URL to 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://nyc3.digitaloceanspaces.com/dev-devout/media/how-to-make-an-image-a-link-in-html.png" alt="How to make an image a link" width="750" height="375">
            </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="_blank" attribute within the <a> tag.