What is the <img> tag in HTML?
The <img> tag in HTML
The <img> tag is used to display an image on an HTML page. The structure of the <img> tag is as follows:
<img src="image_url" alt="alternate_text">
Notice that the <img> tag does not have a closing tag (e.g., </img>), since the <img> tag is only used as a placeholder for the image and the necessary information is passed as attributes to the <img> tag. Both src and alt are required attributes. The src attribute is the path to the image file (e.g., a URL or a relative path). The alt attribute is the text that should be displayed if the image can’t load.
Example usage of the <img> tag
The following code provides an example:
In the example above, two <img> tags were used. The first tag’s src attribute was a URL to a valid image, whereas for the second tag, the URL was invalid. Therefore, in the second case, the alt text This image does not exist is displayed. Moreover, for the first image, width and height attributes are also specified. These optional attributes allow you to alter the dimensions of the image.
Attributes
| Attribute | Value | Description | Required |
|---|---|---|---|
alt |
text | Alternate text for the image which is displayed when the image fails to load | Yes |
crossorigin |
anonymous use-credentials |
Specifies how cross origin images are to be treated | No |
height |
pixels | The height of the image in pixels | No |
ismap |
ismap | A boolean attribute, which if present marks the image as a server-sided image and makes it clickable | No |
loading |
eager lazy |
Specifies whether the image should be loaded immediately or after a delay when some conditions are met | No |
longdesc |
URL | URL to a resource that contains a detailed description of the image | No |
referrerpolicy |
no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
Instructs the browser to use the specified referrer information when fetching the image | No |
sizes |
sizes | Specifies the size of the image for different page layouts | No |
src |
URL | URL of the image resource | Yes |
srcset |
URL-list | List of URL image files to be used in different situations | No |
usemap |
#mapname | Associates the specified <map> tag with the image and marks it as a client-side image map |
No |
width |
pixels | The width of the image in pixels | No |
Browser Support
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Opera | Yes |
Free Resources
