HTML Image Link: How to Make an Image Clickable
To make an image a link in HTML, put the <img> tag inside an <a> tag: <a href="/gallery/"><img src="photo.jpg" alt="Open the gallery"></a>. Clicking the image then follows the link. Because the image is the only content of the link, its alt text should describe where the link goes, not just what the picture shows.
That alt text is the detail most image links get wrong, and it matters for both screen readers and search engines. This guide covers the basic pattern, the alt text, a few styling fixes and captions, with examples you can open and edit in HTMLpad.
The basic image link
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Image link</title></head>
<body>
<a href="https://example.com/">
<img src="https://picsum.photos/id/1015/600/360" alt="Visit Example's travel guide" width="600" height="360">
</a>
</body>
</html>The width and height attributes tell the browser how much space to reserve before the image loads, so the page does not jump as it appears. Use the image's real dimensions; CSS can still resize it. The MDN reference for the img element lists the other attributes, such as loading="lazy" for images further down the page.
Write alt text for the destination
When an image is the only thing inside a link, its alt text becomes the link text. A screen reader announces "link, Visit Example's travel guide", not a description of mountains and a lake. The W3C's images tutorial calls these functional images and sets out the rule: describe the action or destination.
| The image | Weak alt text | Better alt text |
|---|---|---|
| Your logo, linking to the home page | "Logo" | "Acme home page" |
| A product photo, linking to the product | "Photo of a blue mug" | "Blue enamel mug, view details" |
| A social icon | "Icon" | "Our page on Instagram" |
| A thumbnail, linking to a full size version | "Image" | "Open the full size photo of the harbour" |
If the link also contains visible text, such as a product name under the photo, the image is decoration for that link. Give it an empty alt="" so the name is not read twice.
Image and text in the same link
Cards that combine a picture and a title are often one big link:
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Card link</title>
<style>
.card { display: block; max-width: 300px; color: inherit; text-decoration: none;
border: 1px solid #ddd; border-radius: 10px; overflow: hidden; font-family: system-ui, sans-serif; }
.card img { display: block; width: 100%; height: auto; }
.card span { display: block; padding: .8rem 1rem; font-weight: 600; }
.card:hover span { text-decoration: underline; }
</style></head>
<body>
<a class="card" href="https://example.com/harbour/">
<img src="https://picsum.photos/id/1011/600/400" alt="" width="600" height="400">
<span>A weekend by the harbour</span>
</a>
</body>
</html>The title carries the meaning, so the image has an empty alt. The underline on hover shows that the card is clickable.
Fix the gap and the border
Two small annoyances come up again and again:
- A thin gap under the image. Images sit on the text baseline, which leaves space for letters that hang below the line.
img { display: block; }removes it. - A blue border around the image. Old browsers drew one around linked images. Modern browsers do not, but some older stylesheets still undo it with
img { border: 0; }, and that rule does no harm.
Add a caption
To show a caption under a linked image, wrap both in a <figure>:
<figure>
<a href="/harbour/"><img src="harbour.jpg" alt="Read about our weekend by the harbour" width="600" height="400"></a>
<figcaption>The harbour at dawn, from the north pier.</figcaption>
</figure>Open the full image or another site
- To open the full size image, link straight to the image file:
<a href="harbour-large.jpg"><img src="harbour-small.jpg" alt="Open the full size photo of the harbour"></a>. - To open another site in a new tab, add
target="_blank" rel="noopener"to the<a>, as explained in the HTML link code guide.
Images that do not appear
If the link works but the picture is missing, the problem is the src path, not the link. Paths are read from the folder of the HTML file, and paths that point at your own disk, such as C:\Users\..., never work online. The same rules apply as for stylesheets, which I go through in how to link CSS to HTML. If you would rather the image looked like a button, see the HTML button link guide.
You can try all of this in the HTML sandbox. For more on working with existing pages, see how to edit an HTML file and the guide to opening HTML files.
Frequently asked questions
How do I make an image a link in HTML?
Wrap the <img> tag in an <a> tag with the destination in href: <a href="/page/"><img src="pic.jpg" alt="Where the link goes"></a>.
What alt text should a linked image have?
Describe where the link goes or what it does, such as "Acme home page" for a logo. If the link also has visible text that says the same, use an empty alt="" instead.
Why is there a space under my linked image?
Images sit on the text line by default, which leaves room below for letters like g and y. Set display: block on the image to remove it.
Can an image link open in a new tab?
Yes. Add target="_blank" rel="noopener" to the <a> tag that wraps the image.