Wrap the image in an anchor tag to turn it into a link

To make a picture clickable, you put the image tag inside an anchor tag. The anchor tag is what creates links in HTML — it tells the browser "this thing should go somewhere when clicked." When you wrap an image inside it, the image becomes the clickable part instead of text.

The basic structure looks like this: <a href="destination-page.html"><img src="picture.jpg" alt="description"></a>. The href attribute in the anchor tag points to wherever you want the click to go. The src attribute in the image tag points to your picture file. The alt attribute describes the image for people using screen readers.

When a visitor clicks anywhere on the picture, their browser goes to the URL in the href. The image itself doesn't change — it just becomes interactive.

Key Takeaways

  • Wrap your image tag inside an anchor tag, with the href attribute pointing to where you want the link to go.
  • Always include an alt attribute on the image to describe what the picture shows, for accessibility and search engines.
  • You can link to another page on your site, an external website, an email address, or a file read.
  • Add CSS styling to show visitors the image is clickable, such as a border, shadow, or opacity change on hover.

Linking to different destinations with the same image tag

The href attribute controls where the click goes, so you can point an image to any destination you would point a text link to. To link to another page on your own site, use a relative path: <a href="about.html"><img src="logo.jpg" alt="Company logo"></a>. To link to an external website, use the full URL: <a href="https://example.com"><img src="button.jpg" alt="Visit our partner"></a>.

You can also link to an email address by using href="mailto:contact@example.com", which opens the visitor's email program when they click the image. For a file read, point to the file itself: <a href="document.pdf"><img src="read-icon.jpg" alt="read PDF"></a>. The browser will read the file instead of navigating to a new page.

In all cases, the image tag stays the same — only the href changes. This makes it straightforward to reuse the same image in different places on your site, pointing to different destinations.

Making it clear to visitors that an image is clickable

By default, a linked image looks almost identical to a non-linked image. Visitors may not realize it is clickable unless you give them a visual signal. The most common approach is to add a border or change the appearance when someone hovers their mouse over it.

You can add a border in CSS with a img { border: 2px solid blue; }, which puts a blue line around every linked image. To make the image change when someone hovers over it, use a img:hover { opacity: 0.7; }, which makes the image slightly transparent. You could also use transform: scale(1.05) to make it grow slightly, or box-shadow to add a shadow effect.

Another approach is to add text near the image that says "Click here" or "Learn more", so the purpose is obvious without relying on hover effects alone. This helps visitors on mobile devices, where hovering does not exist.

Using images as navigation buttons

Many websites use linked images as navigation buttons — clickable pictures that take you to different sections of the site. A logo image at the top of the page often links back to the home page. Product images in a store link to the product detail page. Icon images in a menu link to different sections.

The structure is the same as any other linked image, but the placement and styling matter more. A logo link should be obvious and straightforward to find, usually in the top left corner. Product images should look clickable — often with a slight shadow or border to signal interactivity. Icon buttons should be large enough to click easily on a phone, at least 44 pixels wide and tall.

When you use an image as a button, the alt text becomes especially important. Instead of just describing the image, it should describe what happens when you click it: alt="Go to home page" instead of just alt="Company logo". This helps people using screen readers understand the link's purpose.

Combining images with text in the same link

You can put both an image and text inside a single anchor tag, so clicking either one goes to the same place. This is common in navigation menus where an icon and a label sit side by side: <a href="products.html"><img src="icon.jpg" alt=""> Products </a>.

When you combine an image and text in one link, leave the alt attribute empty (alt="") if the text already describes what the link does. This prevents screen readers from reading the image description and then the text separately, which would be repetitive. If the image adds information that the text does not convey, write a meaningful alt attribute instead.

You can style the image and text separately using CSS, even though they are in the same link. For example, a img { margin-right: 8px; } adds space between the icon and the text, and a:hover img { filter: brightness(1.2); } makes the image brighter when you hover over the link.

Avoiding common mistakes with linked images

The most common mistake is forgetting the alt attribute. Every image needs one, whether it is linked or not. Screen readers rely on alt text to describe images, and search engines use it to understand what your page shows. A linked image without alt text is invisible to both.

Another mistake is making the image too small to click comfortably. On a phone, a clickable area should be at least 44 pixels wide and tall. If your image is smaller, add padding to the anchor tag: a { display: inline-block; padding: 10px; }. This makes the whole padded area clickable, not just the image itself.

A third mistake is not showing visitors that the image is clickable. If an image looks identical whether it is linked or not, people will not try to click it. Always add a visual signal — a border, shadow, color change, or nearby text — so the interaction is obvious.

Frequently Asked Questions

Can I make just part of an image clickable?

Yes, using an image map. You define clickable regions within a single image using the <map> and <area> tags, each with its own href. This is useful for diagrams or floor plans where different sections link to different pages. However, image maps are harder to maintain and do not work well on mobile devices, so most modern sites use separate images or overlaid buttons instead.

What happens if I link an image to a file instead of a webpage?

The browser downloads the file instead of opening a new page. This works for PDFs, images, videos, and any other file type. Visitors may not expect this behavior, so it is good practice to add text near the link that says "read" or shows the file type, so they know what will happen when they click.

Do I need to remove the underline that appears under linked images?

By default, linked images do not have an underline — that is only for text links. If an underline appears, it is usually because you added a border or the browser is showing focus for accessibility. You can remove it with CSS if needed, but be careful not to hide the fact that the image is clickable.

Can I open a linked image in a new tab instead of the current page?

Yes, add target="_blank" to the anchor tag: <a href="page.html" target="_blank"><img src="picture.jpg" alt="description"></a>. This opens the link in a new tab or window. Let visitors know this will happen by adding text like "opens in new tab" or using an icon, so they are not surprised.

How do I make a linked image responsive on mobile devices?

Use CSS to make the image scale with the screen size: a img { max-width: 100%; height: auto; }. This keeps the image from getting too large on big screens and shrinks it on small screens. Make sure the clickable area stays at least 44 pixels on mobile, or add padding to the anchor tag to make it easier to tap.