How to Link an Image on Your Website

There's a difference between inserting an image on a webpage and making that image a clickable link. Although the HTML is similar, a link relies on an anchor element while an image uses the img element. However, an image may nest within an anchor, making that image clickable as a link.

Inserting Images into Anchor Elements

A common use of an image-based link is the site's logo graphic, which is then linked back to the site's homepage.

Here's how you would place a non-clickable image in the HTML document:

<img src="logo.svg" alt="Our Company logo">

To transform the image into a link, add the anchor link, opening the anchor element before the image and closing the anchor after the image. This technique is similar to how you link text, except that instead of wrapping the words, you wrap the image:

<a href="index.html"><img src="logo.svg" alt="Our Company Logo"></a>

When you add this type of HTML to your page, don't put any spaces between the anchor tag and the image tag. If you do, some browsers will add little ticks beside the image, which will look odd.

The logo now also acts as a homepage button, which is pretty much a web standard these days.