How can you make an image clickable in HTML?

HighEasyHtml

By FrontendAtlas Team · Updated Jan 30, 2026

Quick Answer

You can make an image clickable by wrapping it in an anchor tag, but the real pitfall is forgetting that it still behaves like a link. Good linked images need meaningful alt text, clear destination context, and safe new-tab handling with rel="noopener noreferrer" when needed.

Answer

Overview

You can make an image clickable by placing it inside an <a> tag. The <a> tag defines a hyperlink, and any element inside it - including images - becomes clickable. The common mistake is treating this as "just markup" and forgetting link semantics, destination clarity, and accessible alt text.

Step	Action
1	Add an <a> tag with an `href` attribute (the link destination).
2	Place the <img> tag inside the <a> tag.
3	Optionally, use `target="_blank"` to open the link in a new tab.

Steps to make an image clickable

Example: Basic Clickable Image

HTML

<a href="https://www.example.com">
  <img src="logo.png" alt="Example Logo">
</a>

In this example, clicking the image takes the user to https://www.example.com.

Example: Opening in a New Tab

HTML

<a href="https://www.example.com" target="_blank">
  <img src="logo.png" alt="Example Logo">
</a>

The target="_blank" attribute opens the linked page in a new browser tab.

Example: Clickable Image as a Button

HTML

<a href="/home" class="img-link">
  <img src="home-icon.png" alt="Home">
</a>

<style>
  .img-link img {
    width: 80px;
    border-radius: 8px;
    transition: transform 0.2s;
  }
  .img-link img:hover {
    transform: scale(1.05);
  }
</style>

This example uses CSS to make the image behave like a stylish clickable button with hover effects.

Accessibility Tip

Always provide a clear alt attribute describing the image’s purpose.
If the image represents navigation (like a button), the alt text should describe the action, e.g., “Go to Home Page.”

Still so complicated?

Think of wrapping the image inside an <a> tag as placing a door on it — the picture stays the same, but now it leads somewhere when clicked.

Summary

Wrap the <img> tag inside an <a> tag to make it clickable.
Use target="_blank" to open in a new tab.
Style it with CSS for button-like interaction.
Always include descriptive alt text for accessibility.