How to Make an Image Link in HTML

Turning a picture into something clickable feels like it should be a one-attribute job, and that expectation is exactly what trips people up. There's no clickable="true" attribute for <img>, and no special "image link" element either. Learning how to make an image a link in HTML really comes down to one plain pattern: wrap the image in an anchor. Once that clicks (no pun intended), everything else in this guide is just variations on the same idea, covering internal pages, external sites, new tabs, and making sure a screen reader user knows what the picture actually does.

How to Make an Image a Link in HTML

The short version: put an <img> inside an <a>.

That's the entire pattern. The <a> element is what creates the link: it's the thing a browser actually treats as clickable and a screen reader announces as a link. The <img> inside it is just content, the same way a word or sentence would be if it were wrapped in that same anchor instead.

Three attributes do the real work here, and it's worth being precise about which does what, since mixing them up is the single most common mistake in this whole topic:

• href goes on the <a> tag. It's the destination, meaning the page, file, or URL the click takes the user to. Per the WHATWG HTML Standard, this is what makes <a> a hyperlink in the first place.

• src goes on the <img> tag. It's the path to the actual image file being displayed, unrelated to where a click sends anyone.

• alt also goes on the <img> tag. Per the MDN <img> reference, it's the text alternative shown or read aloud when the image can't be seen. When the image is the only thing inside a link, this text carries extra weight, since it also functions as the accessible name for the link, which the accessibility section below covers in detail.

A minimal working page puts it together like this:

Nothing about width and height is required for the link to function, but setting them helps the browser reserve space for the image before it loads, which reduces layout shift. It's a detail worth keeping even in a two-line example.

Link an Image to a Page, Website, or Image File

The anchor-wraps-image pattern doesn't change based on the destination. What changes is the href value.

Internal page links use a relative URL, meaning a path relative to the current page's location rather than a full address:

External website links use an absolute URL, meaning the full address including the protocol:

Linking a thumbnail to its full-size version is the same structure again, just with the href pointing at the larger image file instead of an HTML page:

Clicking that thumbnail opens the full-resolution image directly in the browser, since browsers render standalone image files as pages on their own.

Linking to a specific section of the same page uses a fragment identifier, an href value starting with # followed by the target element's id:

The browser scrolls to whichever element has the matching id. This only works if that id value exists exactly once on the page and is spelled identically in both places; a mismatch here is a common reason this pattern silently fails.

Make an Image Open in a New Tab

Adding target="_blank" to the anchor makes the link open in a new tab or window instead of navigating away from the current page:

This makes sense in specific situations: linking out to documentation or a reference site while the user is mid-task, sending someone to a download or PDF, or any external destination where losing the current page's state would be annoying. It's a poor fit for internal navigation, where opening extra tabs for every click just adds clutter.

The rel="noopener noreferrer" pair is worth keeping even though modern browsers now handle part of it automatically. According to MDN's documentation on the noopener attribute value, setting target="_blank" on an <a> element implicitly provides the same behavior as rel="noopener" in current browsers, which prevents the new tab from getting a reference back to the original page via window.opener. Adding it explicitly is still standard practice for compatibility with older browsers that predate that default, and noreferrer additionally stops the browser from sending the current page's URL as the referrer to the destination site, a privacy behavior that isn't covered by the implicit noopener default.

Make Image Links Accessible

An image link that only "looks" clickable to a sighted user isn't finished. Screen reader users rely entirely on the alt text to know what a linked image will do, so getting it right matters more here than on a decorative image sitting in a paragraph.

When the image is the only content inside the link, its alt text has to describe where the link goes or what it does, not just what the picture shows. According to WebAIM's guidance on alternative text, when an image is the only content inside a link, the alt text is all a screen reader has to work with, so it needs to convey the function of the link rather than just describe the image.

Note that alt="Example Company homepage" describes the destination, not the visual (it doesn't say "blue rectangular logo with white text"). That's the right call, since screen readers already announce the element as a link, so restating "logo" or adding "click here" is redundant noise. WebAIM's accessible images guide makes this point directly: words like "picture of" or "link to" are unnecessary since screen readers identify images and links on their own.

When the image sits next to visible text inside the same link, the text is already doing the describing, so the image can safely get an empty alt="":

A screen reader announces this as "link, Wireless Mouse," which is clean and non-redundant, instead of repeating the product name twice.

When the image is decorative and has no adjacent text at all, giving it alt="" alone would leave the link with no accessible name whatsoever, which is worse than a redundant description. The fix is to give the link itself an accessible name using aria-label, while the image stays empty:

This keeps the icon itself out of the screen reader's way while still telling the user exactly what activating the link does.

Common Image Link Examples

A few patterns account for most real-world uses of a clickable image:

A clickable logo is the most common version of all: nearly every site wraps its header logo in a link back to the homepage.

Here the logo is treated as decorative with an accessible name on the link itself, since "WPF Sharp Academy homepage" describes the destination more usefully than a literal description of the logo mark would.

Common Mistakes With Image Links

• Putting href on <img> instead of <a>. The <img> element has no href attribute in the HTML spec, so adding one does nothing; the browser silently ignores it and the image stays unclickable.

• Mixing up src and href. src is exclusively for the image file being displayed; href is exclusively for the link's destination. They never belong on the same element.

• Broken relative paths or URLs. A relative path like images/photo.jpg resolves differently depending on which folder the current HTML file lives in, so moving a file without updating the paths that reference it is a frequent source of dead links.

• Missing or ineffective alt text. Leaving alt off entirely, or filling it with something generic like "image1.jpg," gives screen reader users nothing useful to work with, especially when the image is the only content of the link.

• Reaching for JavaScript when a plain link would do. An onclick handler that sets window.location works, but it loses the built-in behaviors a real <a href> gets for free, including middle-click to open in a new tab, right-click to copy the link, and correct behavior for keyboard and assistive technology users.

Here's the contrast in code, since the first mistake in that list is worth seeing directly:

Fix an Image Link That Is Not Working

When a linked image isn't responding to clicks, work through these in order:

1. Check that <img> is actually inside <a>. It's easy to close the anchor tag too early, especially in templated or CMS-generated markup, leaving the image sitting right next to the link instead of inside it.

2. Verify the href and image paths. A typo in either one produces different symptoms: a broken src shows a missing image icon but the link might still work, while a broken href shows the image fine but leads nowhere or to a 404.

3. Check for CSS or overlapping elements blocking clicks. An absolutely positioned overlay, a transparent element with a higher z-index, or pointer-events: none set somewhere in the CSS can all make an otherwise-correct link visually present but unclickable.

4. Test with keyboard and on mobile. Tab to the link and press Enter to confirm it's reachable without a mouse, and check on an actual touchscreen, since hover-dependent CSS can sometimes interfere with tap behavior in ways a desktop test won't catch.

FAQ About Making Images Links in HTML

What is the HTML code to make an image a link?

Wrap the <img> tag inside an <a> tag, with the destination on the anchor's href attribute: <a href="destination-url"><img src="image.jpg" alt="description"></a>.

Can I make an image link to another website?

Yes. Set the <a> tag's href to the full external URL, including https://, the same as any other outbound link.

How do I make an image open in a new tab?

Add target="_blank" to the <a> tag, and pair it with rel="noopener noreferrer" for security and privacy on external links.

Can I link an image to another section of the same page?

Yes. Set href to # followed by the target element's id, such as href="#pricing", and make sure that id exists on the destination element.

Why is my HTML image not clickable?

The most common causes are an <img> that isn't actually nested inside the <a> tag, a CSS element overlapping and intercepting the click, or a typo in the href value. Working through those in order usually finds it.

The Short Version

However the destination or styling changes, the core answer to how to make an image a link in HTML never does: nest the <img> inside an <a>, put the destination on href, and write alt text that describes what the link does rather than just what the picture shows. Everything else in this guide, from new tabs to fragment links to accessibility fallbacks, is a variation on that one pattern.