Quick Reach
Image links in HTML
You can use images that are linked to the other web pages of your website or some other websites. In order to link the images to the other web pages, you can nest the <a> tag with <img> tag. Or use the img tag inside the HTML link tag.
The example below shows how to link an image to another web page.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>HTML img tag</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/”><img src=“TC_logo.png” alt=“Tutorials Collection Logo” height=“60” width=“263”/></a>
</body>
</html>
|
As you can see, after <a href> the img tag is used. In place of the anchor text, you will place image tag to be displayed and linked with the href URL.
An image link example if image is not available
The example below shows if somehow the image is not loaded, or wrong path or wrong image name is given then how alternate text will be visible. For the demo, we have used the wrong image name.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>HTML img tag</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/”><img src=“TC_logo1.png” alt=“Tutorials Collection Logo” height=“60” width=“263”/></a>
</body>
</html>
|
HTML image link with inline CSS
The example below uses the Style attribute with CSS properties to make a link of an image.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>HTML img tag</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/”><img src=“TC_logo.png” alt=“Tutorials Collection Logo” style=“border: dashed 1px red;height: 70px;width: 270px;”/></a>
</body>
</html>
|
Also see HTML forms | HTML href | HTML tutorial
Leave A Comment?