HTML Image Link

Creating an HTML image link is easy. To create an image link, you combine an <a> tag (i.e. link) with an <img> tag (i.e. image). You simply "wrap" the link code around the image code.

Here's an Example:

Source CodeResult
Photo of White Beach in Boracay, Philippines

If you check the code, you'll see that we've simply placed the code for an image inside the code for a normal link.

In case you're not aware, to create a link in HTML, you use the <a> element (the "a" stands for "anchor"). The syntax goes something like this <a href="...some URL...">anchor text</a>. To create an image in HTML, you use the <img> element. To create an image link, you just nest the <img> element inside the <img> element - just as we've done with the above example.

Also note that we've added target="_blank" to open the page in a new window. You can remove that piece of code if you don't want the link to open in a new window.

Adding/Removing Borders

Some browsers automatically display a border around an image whenever it's linked. Other browsers don't. In order to keep your images looking consistent, it pays to add some code so that the image displays consistently throughout different browsers.

Add a Border

To add a border to your image, you should use the CSS border property.

Source CodeResult
Photo of White Beach in Boracay, Philippines

Remove Borders

If you prefer not to have a border around your image, simply modify the width of the border to zero (i.e. border:0 ). Example:

Source CodeResult
Photo of White Beach in Boracay, Philippines

Thumbnail Images

You can link to a larger version of a smaller image. The smaller image is often referred to as a "thumbnail image" or simply just a "thumbnail".

To do this, you should have two images; a small image (i.e. the thumbnail) and a large image.

It is possible to use one image and simply resize it using HTML but that usually defeats the purpose of creating a thumbnail. Creating a separate thumbnail image allows you to use a smaller, less bandwidth intensive image for the thumbnail, and a larger, more detailed image for the full-sized image. Simply resizing the image will use the same bandwidth regardless.

Using thumbnail images, you can link to the actual full-sized image, or to an HTML page that embeds the full-sized image. Either way is fine. If you embed the larger image into an HTML page, at least you can add other things to the page (such as navigation etc).

Anyway, here's an example of linking a thumbnail image to a larger image:

Source CodeResult
Photo of resort in Boracay, Philippines