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.

<ahref="/pricing">
<imgsrc="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)

<ahref="/pricing">
<imgsrc="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".

<ahref="https://example.com"target="_blank"rel="noopener noreferrer">
<imgsrc="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.

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

<ahref="#features">
<imgsrc="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>.

<ahref="/"aria-label="Go to homepage">
<imgsrc="images/logo.png"alt="">
</a>

Examples you can copy

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

<ahref="/"aria-label="Go to homepage">
<imgsrc="images/logo.png"alt="">
</a>

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

<ahref="images/cat.jpg">
<imgsrc="images/cat-thumb.jpg"alt="Open full-size photo of a gray cat">
</a>

Example 3: Product image that links to a product page

<ahref="/products/blue-mug">
<imgsrc="images/mug.png"alt="View Blue Glaze Mug details">
</a>

Example 4: Remove default link styling for linked images

<aclass="image-link"href="/pricing">
<imgsrc="images/pricing-card.png"alt="View pricing plans">
</a>

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

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

Common mistakes and how to fix them

Mistake 1: Putting href on the <img> tag

What you might do:

<imghref="/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.

<ahref="/pricing">
<imgsrc="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:

<ahref="/pricing">
<imgsrc="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.

<ahref="/pricing">
<imgsrc="images/pricing-card.png"alt="View pricing plans">
</a>

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

What you might do:

<ahref="https://example.com"target="_blank">
<imgsrc="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".

<ahref="https://example.com"target="_blank"rel="noopener noreferrer">
<imgsrc="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.