Images as Links
Turn an image into a clickable link.
Syntax
<a href="url"><img src="pic.jpg" alt="..."></a>You can make an image clickable by placing the <img> element inside an <a> element.
When the user clicks the image, they are taken to the linked page. This is common for logos and image galleries.
Example
Loading editor…
Press Run to see the result.
When to use it
- A site logo is wrapped in <a href="/"> so clicking it always returns users to the homepage.
- A product gallery wraps each thumbnail in an <a> linking to a full-size image for a lightbox viewer.
- A social media section uses <a> wrapped around platform icon <img> elements to link to each profile.
More examples
Clickable logo linking to homepage
Wrapping <img> in <a> makes the image a link; aria-label clarifies the link purpose for screen readers.
<a href="/" aria-label="Return to homepage">
<img src="/logo.svg" alt="SoundsCode" width="140" height="40">
</a>Image link opening in new tab
Adding target="_blank" on the wrapping <a> opens the destination in a new tab when the image is clicked.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
<img src="partner-badge.png" alt="Certified Partner" width="120" height="60">
</a>Gallery thumbnails as image links
Each thumbnail <img> is wrapped in an <a> so clicking any photo opens its full-resolution version.
<div class="gallery">
<a href="/images/photo1-full.jpg">
<img src="/images/photo1-thumb.jpg" alt="Sunset over the ocean" width="200" height="150">
</a>
<a href="/images/photo2-full.jpg">
<img src="/images/photo2-thumb.jpg" alt="Mountain trail at dawn" width="200" height="150">
</a>
</div>
Discussion