How to make image a link in html

HtmlHow-ToBeginner · 3 min read

How to Make an Image a Link in HTML: Simple Guide

To make an image a link in HTML, wrap the <img> tag inside an <a> tag. The <a> tag's href attribute sets the link destination, and the <img> tag displays the image that users click on.

📐

Syntax

The basic syntax to make an image a link uses two tags: <a> and <img>.

<a href="URL">: This tag creates a clickable link. Replace URL with the web address you want to open.
<img src="image-path" alt="description">: This tag shows the image. Replace image-path with the image file location and alt with a short description for accessibility.

Wrap the <img> tag inside the <a> tag to make the image clickable.

html

<a href="https://example.com">
  <img src="image.jpg" alt="Example Image">
</a>

Output

A clickable image that links to https://example.com

💻

Example

This example shows a clickable image that links to the OpenAI website. When you click the image, it opens the link in the same tab.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Link Example</title>
</head>
<body>
  <a href="https://openai.com">
    <img src="https://openai.com/favicon.ico" alt="OpenAI Logo" width="64" height="64">
  </a>
</body>
</html>

Output

A small OpenAI logo image that is clickable and links to https://openai.com

⚠️

Common Pitfalls

Some common mistakes when making an image a link include:

Forgetting to wrap the <img> tag inside the <a> tag, so the image is not clickable.
Not providing an alt attribute on the image, which hurts accessibility.
Using an incorrect or broken URL in the href attribute, so the link does not work.
Not setting image size, which can cause layout issues.

Always check your code and test the link in a browser.

html

<!-- Wrong way: image not clickable -->
<img src="image.jpg" alt="Example Image">

<!-- Right way: image wrapped in link -->
<a href="https://example.com">
  <img src="image.jpg" alt="Example Image">
</a>

Output

The first image is not clickable; the second image is clickable and links to example.com

📊

Quick Reference

Remember these tips when making an image a link:

Use <a> to create the link.
Put <img> inside <a>.
Always add alt text for accessibility.
Check your URLs carefully.
Set image size attributes if needed for layout.

✅

Key Takeaways

Wrap the tag inside an tag to make the image clickable.

Always include an alt attribute on images for accessibility.

Set the href attribute in to the desired link URL.

Test your image link in a browser to ensure it works.

Avoid broken URLs and missing alt text to improve user experience.