HTML Image Link

We can use HTML images to improve the structure of the web page and make the web page more expressive and appealing. We can even use HTML images as links, meaning if we click on the image, it acts as a link and takes us to a different page.

We will comprehend more about the HTML image link in this article. It is vital to comprehend HTML images before we learn the HTML image link, so let us understand HTML images first.

HTML Images

In earlier times, HTML language was used to insert only textual content on web pages, which was quite boring, and people were not interested in reading web pages. Then, the developers created an <img> tag, which is used to add images to the web page so that the web page looks interesting.

Syntax:

We can witness in the above syntax that there is <img> tag and two attributes which are "src" and "alt".

• <img>: It is a self-closing tag, which does not require separate opening and closing tags.
• "src": The "src" attribute adds the URL or path of your desired image.
• "alt": The "alt" attribute is used to add some text related to the image, which can be the name of the image.

We can insert images on the web page using two methods.

1. The first method is to provide a URL to access the internet file.
2. The second method is to provide a path of the file related to the location of the current web page.

First Approach: Providing URL

Code:

Output:

We can witness the image on the web page.

Second Approach: Providing the Path of the Image

Code:

Output:

We can witness the image on the web page.

Now that we understand how to add images on the web page, It is time to understand how to use those images as links.

It is easy to create an HTML image link. We have to use <a> tag to add the link in combination with the <img> tag. We have already understood the <img> tag. Let us now understand the <a> tag.

<a> Tag:

The <a> is the anchor tag used to add the link on the web page, which helps users move from one page to another.

Syntax of <a> tag:

<a href="link">Some Text about the link </a>

We can see the following in the above syntax:

• <a>: It is the opening tag of the anchor.
• </a>: It is the closing tag of the anchor
• href: It is the attribute that is used to create a hyperlink. The link could be to any web page on the same page, etc.

Example of <a> Tag:

Code:

Output:

When we click on the link provided in the output, it redirects to the Javatpoint website.

We will now comprehend the <a> tag with <img> tag to construct an HTML image link.

Syntax for HTML image link:

The <img> tag is written within the <a> tag, as shown in the above-provided syntax.

Demonstration of Creating HTML Image Link

We will see some of the demonstrations of HTML image links.

Demo 1:

We will construct the HTML image link in this demonstration.

Code:

Output:

When we touch on the image in the outcome below, the Javatpoint website will be opened.

Demo 2:

We will utilize the style for the image we insert on the web page and create it more eye-catching by utilizing the "style" attribute.

The style attribute is used to deliver style to the HTML element. We will use width, height and border properties in this demonstration to adjust the look of the image.

Code:

Output:

We can witness the styled image, which, when we press on the image visible in the outcome below, will be shifted to the Javatpoint website.

Browser Compatibility

Here are the browsers that support the <a> and <img> tags:

• Opera
• Google Chrome
• Firefox
• Safari
• Internet Explorer

Conclusion

We have comprehended how to create HTML image links in this article. We have understood <a> and <img> tags used to insert an image as a link.