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+