HTML Image
HTML Image tag <img>
displays image in a webpage. In this tutorial, we will learn how to define HTML Image element with different case studies.
</>
Copy
<img src=""/>
Examples
The following is a basic example to display HTML Image in a webpage.
index.html
</>
Copy
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="https://www.tutorialkart.com/img/dragonfly.jpg">
</body>
</html>
When the image at the provided src
is not available, browsers display a broken image symbol.
alt
attribute helps to display an alternative text when image is not available. This increases readability of the webpage when the image is not available.
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Image loaded</h2>
<img src="https://www.tutorialkart.com/img/dragonfly.jpg">
<br>
<h2>Image not loaded</h2>
<img src="https://www.tutorialkart.com/img/dragonfly_n.jpg">
<br>
<h2>Image not loaded, but alternate text is present</h2>
<img src="https://www.tutorialkart.com/img/dragonfly_n.jpg" alt="Dragon Fly">
</body>
</html>
Alt attribute is very useful when you consider SEO for your website. alt attribute acts as a description to the images and let the search engines know what the image is about.