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