Frontend interview answer

How can you make an image clickable in HTML?

HighEasyHtml

By FrontendAtlas Editorial · Updated Jul 14, 2026

Interview quick answer

Make an image a hyperlink by wrapping it in an anchor with a real href attribute. An anchor without href is not a hyperlink. Good linked images also need meaningful alt text, clear destination context, and safe new-tab handling with rel="noopener noreferrer" when needed.

Interview focus

This HTML interview question tests whether you can explain Clickable images in HTML: anchor pattern, alt text, and new-tab pitfalls, connect it to production trade-offs, and handle common follow-up questions.

Clickable images in HTML: anchor pattern, alt text, and new-tab pitfalls explanation without falling back to memorized definitions
Images and Links reasoning, edge cases, and production failure modes
How you would answer the most likely HTML interview follow-up

Practice more HTML interview questions

Interview answer drill

Use this HTML interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice more HTML interview questions Follow 7-day crash study plan Open Essential 60

Full interview answer

Overview

Make an image a hyperlink by placing it inside an anchor that has an href attribute. The href supplies the link destination; an anchor without href is not a hyperlink. 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	If a new tab is required, use `target="_blank"` with `rel="noopener noreferrer"`.

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" rel="noopener noreferrer">
  <img src="logo.png" alt="Example Logo">
</a>

The target="_blank" attribute requests a new browsing context, while rel="noopener noreferrer" prevents the opened page from controlling the opener and avoids sending referrer information.

Example: Styled Image Link

HTML

<a href="/" 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 remains a navigation link even when CSS gives the linked image a button-like appearance. Use a real <button> for an action that does not navigate.

Accessibility Tip

Give the anchor a real href; without it, the anchor is not a hyperlink.
Provide clear alt text that gives the linked image an accessible name describing its destination or purpose, such as “Go to home page.”

Still so complicated?

The image supplies the link’s visible content and accessible name; the anchor’s href supplies the destination. Both parts are needed for an image hyperlink.

Summary

Wrap the <img> inside an anchor with a real href; an anchor without href is not a hyperlink.
If a new tab is required, pair target="_blank" with rel="noopener noreferrer".
Keep navigation as a link even when styling it to look button-like.
Use descriptive alt text for the link’s accessible name.