HTML image tag and it's attributes with example

HTML img tag is utilized to show image on the web page. HTML img tag is an empty tag that contains attributes just, shutting tags are not utilized in HTML image element.

Example:-

<h2>HTML Image Example</h2>  

<img 
src="https://blogger.googleusercontent.com
/img/b/R29vZ2xl/AVvXsEhCwTL686ovHtwcYG4Rr3I
Z4B6pxVFfaPBVU-lpYpKZ-N8unpm2z0MD662ZDspZg
XVX0vglL6uvX-Y43LarsZUiULDn
2d58PXOiXF3qWfa2q4fsCrDaVbUhrItP83Zl
vdAt32Nws0A354n6Q0i-nqp1aK_Rkgfyz3Y1D9yQGZ
7_JRP1HZboydNu2ezj/w320-h284/HTML.webp" 
alt="HTML image tag"/>

Output:

HTML Image Example

Attributes of HTML img tag with example

The src and alt are significant attributes of HTML img tag. All attributes of HTML image tag are given underneath.

1) image src attribute

It is a necessary attribute that describes the source or way of the image. It educates the browser where to search for the image on the server.

The area of image might be on a similar directory or another server.

2) image alt attribute

The alt attribute characterizes an alternate text for the image, in the event that it can't be shown. The value of the alt attribute characterize the image in words. The alt attribute is viewed as good for SEO planned.

3) image width attribute

It is an discretionary attribute which is utilized to determine the width to show the image. It is not suggested now. You ought to apply CSS instead of width attribute.

4) image height attribute

It h3 the height of the image. The HTML height attribute likewise upholds iframe, image and object elements. It isn't suggested now. You ought to apply CSS instead of height attribute.

5) image title attribute

It defines the title of the image

Example of HTML image tag using all attribute:-

<h2>HTML Image Example</h2>  

<img  
src="https://blogger.googleusercontent.com/
img/b/R29vZ2xl/AVvXsEhCwTL686ovHtwcYG4Rr3
IZ4B6pxVFfaPBVU-lpYpKZ-N8unpm2z0MD662ZDspZ
gXVX0vglL6uvX-Y43LarsZUiULDn2d58PXOiXF3qWf
a2q4fsCrDaVbUhrItP83ZlvdAt32Nws0A354n6Q0i-
nqp1aK_Rkgfyz3Y1D9yQGZ7_JRP1HZboydNu2ezj/
w320-h284/HTML.webp" 
alt="HTML image tag"
title="HTML  image  tag" 
width="100" height="100"/>

Output:-

HTML Image Example

Use <img> tag as a link

We can likewise link an image with other page or we can involve an image as a link. To do this, put <img> tag inside the <a> tag.

Example:

<a 
href="https://www.sinhacoch. blogspot.com/"
>
<img 
src="https://blogger.googleusercontent.com
/img/b/R29vZ2xl/AVvXsEhCwTL686ovHtwcYG4Rr3
IZ4B6pxVFfaPBVU-lpYpKZ-N8unpm2z0MD662ZDsp
ZgXVX0vglL6uvX-Y43LarsZUiULDn2d58PXOiXF3q
Wfa2q4fsCrDaVbUhrItP83ZlvdAt32Nws0A354n6
Q0i-nqp1aK_Rkgfyz3Y1D9yQGZ7_JRP1HZboydNu
2ezj/w320-h284/HTML.webp" 
height="100" width="100">
</a>

Output:

Previous                                                                                             Next