Open Image In New Tab [With HTML Source Code]

In this blog post, we will learn how to open images in a new tab using HTML code.

You may have seen websites opening their images in new chrome or firefox tabs. That gives a good user experience to the user visiting your website.

Luckily, this is very easy to achieve, and let's see how we can open images in a new tab using HTML.

• Open Images In A New Tab Using HTML

Open Images In A New Tab Using HTML

In HTML, we can make use of an anchor element () to open links and even images in new tab.

The anchor element has the target attribute which we can use to instruct the browser to open this link or image in a new tab.

Let's see an example code.

Example:

Result:

Click the below image to open it in a new tab.

Let's break the above code down to small bits.

We have created an img element. We have set the src attribute for this img element to an Image location.

Then we wrap this Image element inside an anchor element.

Then we have given the href property of this anchor element to the same image location that we want to open in a new tab.

The Anchor element now becomes a link and will open this image in the same web page.

For the image to open in a new tab, we will set the target attribute on the anchor element and set it to _blank.

This will now open the image that the anchor element opens in a new tab.