How to Make an Image a Link in HTML

What you’ll build or solve

Wrap an image in an anchor tag so clicking the image takes the user to a page, a file, or a section.

When this approach works best

This approach works best when the image acts as navigation or a call-to-action.

Use it when you:

• Make a logo link back to your homepage.
• Create clickable thumbnails that open a full-size image.
• Link a product image to a product details page.

Skip this approach when:

• The image is purely decorative and you already have a text link nearby. A second link can be repetitive.
• The click should trigger an action like opening a modal. Use a <button> and handle it with JavaScript.

Prerequisites

• A text editor and a browser.
• An image on your page (<img>).
• A destination URL, such as a page path, a full URL, or an #id anchor.

Step-by-step instructions

Step 1: Wrap the image in an <a> tag with the right destination

Use an anchor (<a>) with an href, then put the <img> inside it. Write alt text that describes what happens when someone clicks.

<a href="/pricing">
  <img src="images/pricing-card.png" alt="View pricing plans">
</a>

Pick the destination type that matches your use case.

Option A: Link to another page (most common)

<a href="/pricing">
  <img src="images/pricing-card.png" alt="View pricing plans">
</a>

Option B: Link to an external site

If you open a new tab, add rel="noopener noreferrer".

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  <img src="images/partner-logo.png" alt="Visit Example partner site">
</a>

Option C: Link to a section on the same page

Add an id to the target section, then link to it with #id.

<section id="features">
  <h2>Features</h2>
</section>

<a href="#features">
  <img src="images/arrow-down.png" alt="Jump to features">
</a>

What to look for

• If clicking does nothing, the href is missing, empty, or misspelled.
• If #features doesn’t scroll, the target id may not exist or may be spelled differently.
• If the image is decorative inside the link, set alt="" and add an aria-label to the <a>.

<a href="/" aria-label="Go to homepage">
  <img src="images/logo.png" alt="">
</a>

Examples you can copy

Example 1: Logo that links to the homepage (decorative image)

<a href="/" aria-label="Go to homepage">
  <img src="images/logo.png" alt="">
</a>

Example 2: Clickable thumbnail that opens the full-size image

<a href="images/cat.jpg">
  <img src="images/cat-thumb.jpg" alt="Open full-size photo of a gray cat">
</a>

Example 3: Product image that links to a product page

<a href="/products/blue-mug">
  <img src="images/mug.png" alt="View Blue Glaze Mug details">
</a>

Example 4: Remove default link styling for linked images

<a class="image-link" href="/pricing">
  <img src="images/pricing-card.png" alt="View pricing plans">
</a>

<style>
  .image-link {
    display: inline-block;
    text-decoration: none;
  }

  .image-link img {
    display: block;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Putting href on the <img> tag

What you might do:

<img href="/pricing" src="images/pricing-card.png" alt="View pricing plans">

Why it breaks:

href is not a valid attribute for <img>, so nothing becomes clickable.

Correct approach:

Wrap the image in an <a> tag.

<a href="/pricing">
  <img src="images/pricing-card.png" alt="View pricing plans">
</a>

Mistake 2: Using alt text that describes the picture, not the link action

What you might do:

<a href="/pricing">
  <img src="images/pricing-card.png" alt="Screenshot of pricing cards">
</a>

Why it breaks:

A screen reader user hears the image description, but not what the link does.

Correct approach:

Describe the action or destination.

<a href="/pricing">
  <img src="images/pricing-card.png" alt="View pricing plans">
</a>

Mistake 3: Opening a new tab without rel="noopener noreferrer"

What you might do:

<a href="https://example.com" target="_blank">
  <img src="images/partner-logo.png" alt="Visit Example partner site">
</a>

Why it breaks:

The new page can access your page through window.opener, which is a security and performance risk.

Correct approach:

Add rel="noopener noreferrer".

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  <img src="images/partner-logo.png" alt="Visit Example partner site">
</a>

Troubleshooting

• If the image isn’t clickable, confirm the <img> is inside an <a> and the <a> has a non-empty href.
• If the link goes to a 404 page, fix the href path or URL.
• If the anchor link (#section) doesn’t work, confirm the target id exists and matches exactly.
• If there’s extra spacing under the image, add display: block to the image.
• If the clickable area feels too small, add padding to the <a> and keep it display: inline-block.

Quick recap

• Wrap the <img> inside an <a href="..."> tag.
• Use the right destination: page path, full URL, or #id anchor.
• Write alt text that describes what clicking does, or use aria-label with alt="" for decorative images.
• For external links in new tabs, add rel="noopener noreferrer".
• Fix spacing issues by setting the image to display: block.