How to Link an Image in HTML

To link an image in HTML, nest the <img> tag within an <a> tag.

Link a Thumbnail to a Larger Version of the Image

The link doesn't have to be to another webpage. You can also link to a larger version of the image. Just provide the URL of the larger image in the href attribute instead.

Clicking the above image will open a larger version of the image in a new window. This is because I've nested the <img> element within an <a> element. I specified the location of the larger image in the href attribute and I used target="_blank" to open the URL in a blank window.

JavaScript libraries such as Lightbox allow you to create more sophisticated thumbnail galleries that automatically render an overlay that fills the screen, and dims out the rest of the web page.

Linking Images with Image Maps

Taking image links a step further, you can make different parts of an image link to a different URL. This is called an image map.

See HTML Image Maps for detailed instructions on creating image maps.