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
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.
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
This will now open the image that the anchor element opens in a new tab.