How can you make an image clickable in HTML?

LowEasyHtml

By FrontendAtlas Team · Updated Jan 30, 2026

Preparing for interviews?

Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.

Browse HTML interview questions Explore interview tracks Browse company questions

Quick Answer

You can make an image clickable by wrapping it in an anchor tag. This creates a linked image that behaves like a normal link and is accessible when you include alt text and descriptive link context. Use rel=noopener when opening in a new tab.

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.

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.