LAST UPDATED: NOVEMBER 16, 2020
HTML img Tag
Using HTML <img> tag we can insert images in our webpage. Almost all the webpages these days have images.
There are various attributes of the <img> tag and these are src, lang, dir, alt, etc. which we will cover in this tutorial along with examples.
Among all attributes of the <img> tag, only the src attribute is necessary while all other attributes are optional, because the src attributes has the path of the image to be displayed as the value.
This <img> tag can insert any kind of image. Different image formats supported are: gif, jpeg, png, svg, etc.
HTML <img> Tag - Syntax and Usage
The <img> element is an empty tag which means it only requires a start tag or opening tag.
Also, this is an inline element.
The syntax for the same is given below:
<img src="URL_OF_IMAGE" />
In the src attribute you have to add the complete path or the URL of the image that we want to show.
HTML <img> Tag Attributes
HTML <img> tag supports both Global attributes and Event attributes and some of the common attributes are given below:
| Attributes |
Description |
id |
It is an optional element that assigns a Unique identifier or Id to an HTML tag. This can be used to add styling using CSS or some event handling using Javascript. |
src |
It is a mandatory attribute. It specifies a URL or the location of the image. |
title |
This is an optional attribute that is used to describe the objective of the image. |
alt |
In case when the web browser is not able to render the image(due to slow internet or no internet) then alternate text can be represented using this attribute |
width |
It is used to specify the width of the image and this is an optional attribute |
height |
It is used to specify the height of the image and this is also an optional attribute |
ismap |
It is used to indicate that the image is used as an Image map. It is an optional attribute. |
usemap |
It is used to associate an element with an Image map and it is also optional. |
HTML <img> Tag Basic Example
Below we have few examples of <img> tag:
Example 1:
In the example below, we have displayed a GIF image along with adding a few attributes:
Example 2:
Displaying an Image in PNG Format:-
Default CSS Settings for HTML <img> Tag
img {
display: inline-block;
}
Browser Support for HTML <img> Tag
Following browsers support this attribute:
-
Firefox 1+
-
Google Chrome 1+
-
Internet Explorer 2+
-
Apple Safari 1+
-
Opera 2.1+
