HTML Image Tutorial

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.

<img src=""/>

Examples

The following is a basic example to display HTML Image in a webpage.

index.html

<!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.