HTML Image

The HTML IMG tag is used to display images on all web pages. The HTML IMG tag is an empty tag that contains attributes only, and closing tags are not used in the image element.

Example:

<!DOCTYPE>
<html> 
<body> 
<h2>HTML Image Example</h2> 
<img src="good-morning.jpg" alt="Good Morning Friends"/>
</body> 
</html>

OUTPUT:

HTML Image

Attributes of HTML img tag:

The src (source) and alt are important attributes of HTML img tag.

src (source ): The required attribute that describes the source or path (URL) of the image.

alt: The alt attribute defines an alternate text for the image if it can’t be view. An alt attribute is considered good from an SEO perspective.

width: Used to specify the width to display the image and It is not recommended now. just apply CSS in place of the width attribute.

height: The height attribute also provides iframe, image, and object elements and It is not recommended now. Just apply CSS in place of the height attribute.

Use of height and width attribute:

If we want to give some height and width to display the image according to our requirement.

Example:

<!DOCTYPE html>
<html>
<head>
     <title>Image tag</title>
</head>
<body>
<h2>with height and width</h2>
<img src="https://static.javatpoint.com/htmlpages/images/animal.jpg" height="300" width="500" alt="animal image">
</body>
</html>

OUTPUT:

HTML Image

Images in Another Folder:

Your images in a sub-folder or different folder in your system, you must include the folder name in the src attribute.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Images in Another Folder</h2>
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>

OUTPUT:

HTML Image

Image as a Link:

Image with another page or we can use an image as a link, put img tag inside the tag.

Example:

<!DOCTYPE html>
<html>
 <head>
      <title>Image tag</title>
 </head>
<body>
     <h2>Use image as a link</h2>
 <p>Click on the image</p>
 <a href="https://www.i2tutorials.com/"><img src="https://static.javatpoint.com/htmlpages/images/robot.jpg" height="100" width="100"></a>
 </body>
</html>

OUTPUT:

HTML Image

Animated Images:

HTML allows animated GIFs.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Animated Images</h2>

<p>HTML allows moving images:</p>

<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">

</body>
</html>

OUTPUT:

HTML Image

Image Floating:

Use the CSS float property to let the image float to the right or left of a text.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Floating Images</h2>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image.
</p>

<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image.
</p>

</body>
</html>

OUTPUT:

HTML Image